Checkbox nebeneinander

[Peter Pan]

Hallo,

ist es möglich innerhalb von einem Formular zwei Einträge nebeneinander anzuzeigen?

<form name="form1" method="post" action="">
  <input name="kategorie[]" type="checkbox" id="A1" value="Test1">
  <label for="A1">Feld 1</label>
  <input name="kategorie[]" type="checkbox" id="A2" value="Test2">
  <label for="A2">Feld 2</label>
  <input name="kategorie[]" type="checkbox" id="A3" value="Test3">
  <label for="A3">Feld 3</label>
</form>

Derzeit werden bei mir alle untereinander dargestellt.

[Peter Pan]

Hallo,

1.) War ein <br> drin. 2.) Habe ich es mit CSS gelöst bekommen

<form name="form1" method="post" action="">
  <span class="kategorie">
  <input name="kategorie[]" type="checkbox" id="A1" value="Test1">
  <label for="A1">Feld 1</label>
  </span>
  <span class="kategorie">
  <input name="kategorie[]" type="checkbox" id="A2" value="Test2">
  <label for="A2">Feld 2</label>
  </span>
  <span class="kategorie">
  <input name="kategorie[]" type="checkbox" id="A3" value="Test3">
  <label for="A3">Feld 3</label>
  </span>
</form>

.kategorie{
    width: 400px;
    display: inline-block;
}

[Linuchs]

Hallo,

wenn du schon label verwendest, dann packe doch die Checkbox mit rein. Dann kannst du auch auf <span> und sogar auf die Definition einer class verzichten.

Und wenn die <label> nicht gleich weit sein müssen, verzichtest du auf die Weiten-Angabe. Stattdessen verbietest du nur den Zeilen-Umbruch innerhalb des <label>:

<label for="A3"><input name="kategorie[]" type="checkbox" id="A3" value="Test3"> Feld 3</label>

label {
  white-space: nowrap;
  display: inline-block;
}

Linuchs

[Linuchs]

... und sogar der inline-block ist überflüssig.

Linuchs