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

[Rolf B]

Hallo Sven1894,

das liegt daran, dass Buttons inline-Elemente sind. Diese haben, sofern nichts anderes vorgegeben ist, ein vertical-align: baseline, und deswegen verschieben sie sich bei unterschiedlicher Zeilenanzahl. Der Browser möchte dafür sorgen, dass die Basislinien der Texte auf einer Höhe landen.

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

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.

<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>

Durch CSS sorgst Du für die richtige Darstellung:

ul {
   list-style: none;
   max-width: 25em;
   display: flex;
   flex-flow: row wrap;
}

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

Rolf