Frage Radio / Checkbox-Ausrichtung in HTML / CSS


Was ist der sauberste Weg, Radio Buttons / Checkboxen richtig mit Text auszurichten? Die einzige zuverlässige Lösung, die ich bisher benutzt habe, ist tabellenbasiert:

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

Dies kann von einigen missbilligt werden. Ich habe gerade einige Zeit (wieder) eine tableeless Lösung untersucht, aber gescheitert. Ich habe verschiedene Kombinationen von Schwimmern, absoluter / relativer Positionierung und ähnlichen Ansätzen ausprobiert. Nicht nur, dass sie sich meist still auf eine geschätzte Höhe der Optionsfelder / Checkboxen stützten, sondern sich auch in verschiedenen Browsern anders verhielten. Idealerweise würde ich gerne eine Lösung finden, die von Größen oder besonderen Browser-Macken nichts annimmt. Mir geht es gut mit Tabellen, aber ich frage mich, wo es eine andere Lösung gibt.


76
2017-12-28 17:40


Ursprung


Antworten:


Ich denke, ich habe das Problem endlich gelöst. Eine häufig empfohlene Lösung ist die Verwendung von vertical-align: middle:

<input type="radio" style="vertical-align: middle"> Label

Das Problem ist jedoch, dass dies immer noch sichtbare Fehlausrichtungen erzeugt, obwohl es theoretisch funktionieren sollte. Die CSS2-Spezifikation besagt, dass:

vertikal ausrichten: Mitte: Richten Sie den vertikalen Mittelpunkt der Box mit der Grundlinie der übergeordneten Box und der halben x-Höhe des übergeordneten Elements aus.

Also sollte es im perfekten Zentrum sein (die x-Höhe ist die Höhe des Zeichens x). Das Problem scheint jedoch durch die Tatsache verursacht zu werden, dass Browser den Radio-Buttons und Checkboxen normalerweise zufällige ungleichmäßige Ränder hinzufügen. Man kann beispielsweise in Firefox mit Firebug überprüfen, ob der Standard-Checkbox-Rand in Firefox ist 3px 3px 0px 5px. Ich bin mir nicht sicher, woher es kommt, aber die anderen Browser scheinen ähnliche Ränder zu haben. Um eine perfekte Ausrichtung zu erhalten, muss man diese Ränder entfernen:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

Es ist noch interessant zu bemerken, dass in der tabellenbasierten Lösung die Ränder irgendwie gegessen werden und alles gut ausgerichtet ist.


116
2018-05-20 21:55



Folgendes funktioniert in Firefox und Opera (leider habe ich im Moment keinen Zugriff auf andere Browser):

<div class="form-field">
    <input id="option1" type="radio" name="opt"/>
    <label for="option1">Option 1</label>
</div>

Das CSS:

.form-field * {
    vertical-align: middle;
}

31
2017-10-28 15:02



Ich fand den besten und einfachsten Weg, dies zu tun, weil Sie keine Labels, Divs oder was auch immer hinzufügen müssen.

input { vertical-align: middle; margin-top: -1px;}


13
2017-12-28 18:07



Ich würde dafür überhaupt keine Tabellen verwenden. CSS kann das leicht machen.

Ich würde so etwas tun:

   <p class="clearfix">
      <input id="option1" type="radio" name="opt" />
      <label for="option1">Option 1</label>
   </p>

p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }

Hinweis: Ich habe die Clearfix-Klasse verwendet von: http://www.positioniseverything.net/easyclearing.html

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

6
2017-07-08 22:34



Dies ist ein bisschen wie ein Hack, aber dieses CSS scheint es in allen Browsern sehr gut zu funktionieren, genauso wie die Verwendung von Tabellen (abgesehen von Chrome).

input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
 input[type=radio] { margin-top: -2px; }
}

Stellen Sie sicher, dass Sie Etiketten mit Ihren Radios verwenden, damit es funktioniert. d.h.

<option> <label>My Radio</label>

4
2018-01-09 13:07



Wenn Ihr Etikett lang ist und mehrere Zeilen umfasst, wird die Breite und die Anzeige eingestellt: Inline-Block hilft.

.form-field * {
  vertical-align: middle;
}
.form-field input {
  clear:left;
}
.form-field label { 
  width:200px;
  display:inline-block;
}

<div class="form-field">
    <input id="option1" type="radio" name="opt" value="1"/>
    <label for="option1">Option 1 is very long and is likely to go on two lines.</label>
    <input id="option2" type="radio" name="opt" value="2"/>
    <label for="option2">Option 2 might fit into one line.</label>
</div>

3
2017-10-21 23:38



Ich fand die beste Lösung dafür, der Eingabe eine Höhe zu geben, die dem Label entspricht. Zumindest hat das mein Problem mit Inkonsistenzen in Firefox und IE behoben.

input { height: 18px; margin: 0; float: left; }
label { height: 18px; float: left; }

<li>
  <input id="option1" type="radio" name="opt" />
  <label for="option1">Option 1</label>
</li>

2
2018-04-19 19:20