Inpput Feld ausrichten

[Rolf B]

Hallo KC,

dein div finde ich da jetzt nicht wieder, aber du kannst das beispielsweise als Flexbox lösen. Und ich glaube, du möchtest nicht "rechts ausrichten", sondern einfach die Elemente nebeneinander haben.

Wenn Du wirklick rechts ausrichten willst, setze in .name-entry die Eigenschaft justify-content auf space-between. Oder space-around. Oder was anderes.

<div class="col-12 name-entry">
  <label for="vorname">Vorname:<br>
    <input type="text" class="form-control px-4 inputfield" 
           id="vorname" name="Vorname" required> 
  </label>
  <label for="familienname">Familienname:<br>
    <input type="text" class="form-control px-4 inputfield" 
           id="familienname" name="Name" required> 
  </label>
</div>

.name-entry {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  column-gap: 1em;
}
.name-entry label {
  padding: 0.4em 0;
  flex: 1 0 12em;
  max-width: 25em;
}
.name-entry label input {
  box-sizing: border-box;
  margin-top: 0.5em;
  width: 100%;
}

Diese Lösung ist responsiv und bricht bei schmalen Viewports um (das wrap in flex-flow), so dass die Elemente dann untereinander stehen. Ich verwende die labels als Container mit dem input Element darin. Laut Spec brauche ich dann keine Referenzierung zwischen label und input über for und id, aber es gibt Assistenzprogramme, die auf for und id angewiesen sind. Deshalb sind sie trotzdem drin.

Die Eingabefelder haben eine Minimalbreite von 12em (der 3. Wert bei flex), werden aber nicht schmaler als 12em (die 0 bei flex), dehnen sich aber aus, wenn sie Platz haben (die 1 bei flex). D.h. wenn sie in 12em Breite nicht mehr nebeneinander passen, wird der wrap aktiv. Und wenn dein Fenster breiter als ca 52em ist oder so, dann fängst Du an, Whitespace zu sehen. Mit justify-content kannst Du der Flexbox sagen, wie sie die Elemente und den Whitespace verteilen soll. Der Link oben auf justify-content führt auch zu einem allgemeinen Flexbox-Tutorial.

Rolf