CSS Checkboxen - Text untereinander

[Emskerla]

Liebe Gemeinschaft,

ich habe eine Liste mit vielen Checkboxen untereinander. Der zugehörige Text ist jedoch teilweise so lang, dass er unter die vorangegangene Checkbox-Grafik rutscht. Wie schaffe ich es, dass der Text bündig bleibt?

Beispiel:

HTML:

<label><input type="checkbox" />&nbsp;&nbsp;&nbsp;Kurzer Text</label>
<label><input type="checkbox" />&nbsp;&nbsp;&nbsp;Dieser Text ist zu lang und rutscht unter die Checkbox von "Kurzer Text"</label><br>

CSS:

label 
{
   display:block; 
   font-family: Helvetica,sans-serif;
   font-size: 12px;
   color: #333;
   font-weight: normal;
   margin-left: 20px;
   margin-bottom: 5px;
}


label:hover 
{
   background:#eee;
   cursor:pointer;
}

Vielen Dank im Voraus

 

[fz21z]

hi,

so z.B. http://jsfiddle.net/u5t66dmp/

HTML

<div class="table">
   <div class="row">
      <div class="cell">
        <input type="checkbox">
     </div>
     <div class="cell">
        <label>Dieser Text ist zu lang und rutscht unter die Checkbox von "Kurzer Text"</label>
     </div>
   </div>
</div>

CSS

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

 

[NullPointer]

Oder so, ohne Tabellen: https://jsfiddle.net/sbka4n9e/

 

[Yuuri]

@ NullPointer: Leider den Sinn eines Labels nicht verstanden.

Quick'n'Dirty: https://jsfiddle.net/zp6j9nd4/

 

[fz21z]

@ NullPointer: Leider den Sinn eines Labels nicht verstanden.

Quick'n'Dirty: https://jsfiddle.net/zp6j9nd4/

Dude, dann nenne doch wenigstens den Grund und zeige deine Quelle(n) auf, das hilft allen weiter, danke.

 

[Yuuri]

Muss ich wirklich Sachen erklären, die seit mittlerweile 16 Jahren spezifiziert sind?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
http://www.w3.org/TR/html401/interact/forms.html#h-17.9

Man merkt und sieht es auch schon wunderschön, wenn man die Fiddles mal durchprobiert.

 

[Emskerla]

Quick'n'Dirty: https://jsfiddle.net/zp6j9nd4/

Entscheidender Nachteil: Die Checkboxen befinden sich knapp unterhalb ihres zugehörigen Textes. Je nachdem wie dieser formatiert ist, fällt das sehr deutlich auf.

Habe mit margin und padding experimentiert, aber es nicht hinbekommen.

 

[Yuuri]

Gut, dann guck mal nach Hanging Indent.

 

[NullPointer]

@ NullPointer: Leider den Sinn eines Labels nicht verstanden.

Du irrst. Das Einzige, was man mir vorwerfen kann, ist, dass ich bei den Labels das for-Attribut weggelassen habe. Das hab ich absichtlich gemacht, um den Code einfach zu halten, da es für die hier gestellte Frage keine Rolle spielt. Das input-Element ins Label hineinzuschachteln ist nicht nötig, damit die Labels als solche funktionieren. Steht auch genau so im ersten Absatz auf MDN.