Moin,
ich habe mal wieder diesen Quellcode:
https://jsfiddle.net/rfk6cn0r/1/
Wie man sieht (ich habe die -Tags rot gefärbt) haben die -Tags eine Größe, die nur den Buchstaben umfasst.
Ich möchte aber, dass die -Tags genau so groß wie der umschließende
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/
Vielen Dank!
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/
@Tronjer Viele Wege führen nach Rom, und, der Zweck heiligt die Mittel.
Wenn der Zweck die Mittel heiligen würde, würden wir heute noch Tabellenlayouts machen.
und Texte als Grafiken einbinden.
gähn :rolleyes: