Frage <a> in <li> komplett ausfüllen?

[Willibergi]

Moin,
ich habe mal wieder diesen Quellcode:
https://jsfiddle.net/rfk6cn0r/1/
Wie man sieht (ich habe die <a>-Tags rot gefärbt) haben die <a>-Tags eine Größe, die nur den Buchstaben umfasst.
Ich möchte aber, dass die <a>-Tags genau so groß wie der umschließende <li>-Tag sind.
Mit width:inherit geht das nicht - wenn ich den <li> auf width:auto stelle und den <a>-Tag auf 50px, gehts auch nicht...
Wie kann ich das jetzt realisieren?
Danke!
LG Willibergi

 

[SpiceLab]

ul#tabbez li {
  width: 50px;
  height: 50px;
  list-style-type: none;
  background: #222;
  color: #fff;
  text-align: center;
  display: table; /* umgewandelt */
  float: left; /* hinzugefügt */
  margin: 0px;
  padding-left: 0px;
  border-right: 1px solid #363636;
}
ul#tabbez a{
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  background: #f00;
}

https://jsfiddle.net/spicelab/rfk6cn0r/2/

 

[Willibergi]

Vielen Dank!

 

[Tronjer]

Mag funktionieren, ist aber ein schlechter Ansatz. Die Kombination aus display:table/table-cell dient zur vertikalen Ausrichtungen von Blockelementen. Für die vertikale Zentrierung von einzeiligen Texten verwendet man hingegen das Attribut line-height. Außerdem sollte man auf IDs beim Styling verzichten, und eine Schreibweise à la ul#foo macht es noch schlechter.

Zwei Lösungsansätze:

oldschool per float
https://jsfiddle.net/LgLetkdz/1

oder modern mit display: flex. Das erspart den notwendigen Clearfix auf dem Parent
https://jsfiddle.net/u9ao48gj/

 

[SpiceLab]

@Tronjer Viele Wege führen nach Rom, und, der Zweck heiligt die Mittel.

 

[thecain]

Wenn der Zweck die Mittel heiligen würde, würden wir heute noch Tabellenlayouts machen.

 

[Tronjer]

und Texte als Grafiken einbinden.

 

[SpiceLab]

Wenn der Zweck die Mittel heiligen würde, würden wir heute noch Tabellenlayouts machen.

und Texte als Grafiken einbinden.

*gähn*