Festlegen einer Breite und Höhe für ein A-Tag

131

Ist es möglich, die Breite und Höhe eines Ankertags in Pixel festzulegen? Ich möchte, dass das Ankertag ein Hintergrundbild enthält, während der Text im Anker verbleibt.

li {
  width: 32px;
  height: 32px;
  background-color: orange;
}

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}
<li><a href="#">Something</a></li>
Erweitern Sie das Snippet

html css cross-browser Luke
quelle

Antworten:

288

Sie müssen Ihren Anker machen display: blockoder display: inline-block;und dann akzeptiert er die Werte für Breite und Höhe.

Jared
quelle
66

Sie können auch verwenden display: inline-block. Dies hat den Vorteil, dass Höhe und Breite wie bei einem Blockelement, aber auch inline festgelegt werden, sodass ein weiteres Tag direkt daneben sitzt und der übergeordnete Speicherplatz zulässig ist.

Weitere Informationen zu Anzeigeeigenschaften finden Sie hier

Sarkastyx
quelle
Ich suchte nach einer Lösung, um die Breite des Ankertags als Textinhalt und nicht in einer bestimmten Breite und Höhe festzulegen. Die Einstellung auf "Inline-Block" war also genau das Richtige. Vielen Dank.
TheCuBeMan
7

Alle diese Vorschläge funktionieren nur, wenn Sie die Anker in eine UL-Liste einfügen.

<ul>
    <li>
        <a>click me</a>>
    </li>
</ul>

Anschließend werden alle Cascade-Stylesheet-Regeln im Chrome-Browser überschrieben. Die Breite wird automatisch. Dann müssen Sie Inline-CSS-Regeln direkt auf dem Anker selbst verwenden.

Bradley
quelle
5

Es ist kein genaues Duplikat (soweit ich es finden kann), aber dies ist ein häufiges Problem .

display:blockist was du brauchst. Sie sollten jedoch die Spezifikation lesen, um zu verstehen, warum.

zzzzBov
quelle
2

Unten für mich arbeiten 

display: block;
width: 100%;
Pankaj Upadhyay
quelle