Buttons verschieben sich, wenn nicht alle Buttons gleich viele Zeilen haben

[Gunnar Bittersmann]

@@Rolf B

Schnell-Lösung: Gib ihnen vertical-align:top;.

Warum der Schnellschuss nichts taugt, hab ich ja schon geschrieben.

Es wäre aber zu überlegen, ob dein Markup so richtig ist. Diese Buttons bilden eine Liste und sollten auch so ausgezeichnet werden. Einem sehbehinderten Anwender, der ein Vorlesetool braucht, hilft das.

Ja!

<ul id="antworten">
<li><button type="button" id="antworta", name="antworta">...</button></li>
<li><button type="button" id="antwortb", name="antwortb">...</button></li>
<li><button type="button" id="antwortc", name="antwortc">...</button></li>
<li><button type="button" id="antwortd", name="antwortd">...</button></li>
</ul>

Statt ul könnte man hier vielleicht auch menu nehmen. Wenngleich “list of commands (a ‘toolbar’)” vielleicht etwas großzügig ausgelegt wäre?

button {
   width: 12em;
   height: 5em;
}

Nein!

Es ist nicht gesagt, dass der Text in 5em Höhe hineinpasst. Der Button möchte bei Bedarf höher sein. Also min-height, nicht height.

height und auch width sind auf 100% zu setzen; die Breite der Buttons wird durchs li festgelegt.

☞ Codepen

🖖 Stay hard! Stay hungry! Stay alive! Stay home!