Weiß jemand wie ich mit CSS die Text Boxen so symmetrisch untereinander hinbekomme?

Answer 1

[Babelfish]

Dafür gibt es verschiedenen Wege. Ich würde es bei solchen Sachen so machen:

HTML

<div class="control">
  <label>Ganze Zahl:</label>
  <input type="text">
</div>
<div class="control">
  <label>Schweben:</label>
  <input type="text">
</div>
<div class="control">
  <label>Verhexen:</label>
  <input type="text">
</div>
<div class="control">
  <label>Farbe:</label>
  <input type="text" value="#">
</div>

CSS

.control {
  display: flex;
  margin: 10px 0;
  gap: 10px;
}

.control label {
  display: inline;
  width: 8em;
  text-align: right;
}
.control input[type=text] {
  border: 1px solid silver;
  border-radius: 3px;
  padding: 3px 6px;
}

Beispiel

https://jsfiddle.net/Babelfisch/9fmcb0tv/6/

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.