it-swarm.com.de

Wie kann ich ein HTML-Optionsfeld vertikal an seinem Etikett ausrichten?

Ich habe ein Formular mit Optionsfeldern, die sich in derselben Zeile befinden wie ihre Beschriftungen. Die Optionsfelder sind jedoch nicht vertikal mit ihren Beschriftungen ausgerichtet (siehe Abbildung unten). 

The radio buttons.

Wie kann ich die Optionsfelder vertikal mit ihren Beschriftungen ausrichten?

Bearbeiten:  

Hier ist der HTML-Code:

<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio 2</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio 3</label><br/>

Und der CSS-Code:

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
}
73
ninjacoder

Versuche dies:

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}
121
zakangelle

Ich wusste, ich hatte die Antwort von menuka devinda ausgewählt, aber als ich mir die Kommentare unten anschaute, stimmte ich zu und versuchte, eine bessere Lösung zu finden. Dies ist mir gelungen und meiner Meinung nach eine viel elegantere Lösung:

input[type='radio'], label{   
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
 }

Vielen Dank an alle, die eine Antwort angeboten haben. Ihre Antwort ist nicht unbemerkt geblieben. Wenn Sie noch andere Ideen haben, können Sie dieser Frage eine eigene Antwort hinzufügen.

13
ninjacoder
input {
    display: table-cell;
    vertical-align: middle
}

Setzen Sie Klasse für alles Radio. Dies funktioniert für alle Optionsfelder auf der HTML-Seite. 

Fiddle

10
vusan

versuchen Sie, vertical-align:top in die CSS einzutragen

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
    vertical-align:top;
}​

Test: http://jsfiddle.net/muthkum/heAWP/

9
Muthu Kumaran

Das kannst du so machen:

input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}

DEMO

6

Könnte den Antworten auch etwas mehr Flexibilität verleihen.

.Radio {
  display: inline-flex;
  align-items: center;
}

.Radio input {
  margin-right: 5px;
}

.Radio--Large {
  font-size: 2rem;
}
<div>
  <label class="Radio" for="sex-female">
    <input type="radio" id="sex-female" name="sex" value="female" />
    Female
  </label>

  <label class="Radio" for="sex-male">
    <input type="radio" id="sex-male" name="sex" value="male" />
    Male
  </label>
</div>


<div>
  <label class="Radio Radio--Large" for="sex-female2">
    <input type="radio" id="sex-female2" name="sex" value="female" />
    Female
  </label>

  <label class="Radio Radio--Large" for="sex-male2">
    <input type="radio" id="sex-male2" name="sex" value="male" />
    Male
  </label>
</div>

4
Dominic
label, input {
    vertical-align: middle;
}

Ich stelle nur den vertikalen Mittelpunkt der Boxen mit der Grundlinie der übergeordneten Box plus der halben x-Höhe (en.wikipedia.org/wiki/X-height) der übergeordneten Box zusammen. 

1
Pavel Blagodov

So etwas sollte funktionieren

CSS:

input {
    float: left;
    clear: left;
    width: 50px;
    line-height: 20px;
}

label {
    float: left;
    vertical-align: middle;
}
1
Damien Overeem

Viele dieser Antworten geben an, vertical-align: middle; zu verwenden, was die Ausrichtung näher bringt, aber für mich ist es immer noch um ein paar Pixel kleiner. Die Methode, die ich verwendet habe, um eine echte 1: 1-Ausrichtung zwischen den Beschriftungen und den Radioeingaben zu erhalten, lautet vertical-align: top;:

label, label>input{
    font-size: 20px;
    display: inline-block;
    margin: 0;
    line-height: 28px;
    height: 28px;
    vertical-align: top;
}
<h1>How are you?</h1>
<fieldset>
	<legend>Your response:</legend>
	<label for="radChoiceGood">
		<input type="radio" id="radChoiceGood" name="radChoices" value="Good">Good
	</label>
	
	<label for="radChoiceExcellent">
		<input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent">Excellent
	</label>
	
	<label for="radChoiceOk">
		<input type="radio" id="radChoiceOk" name="radChoices" value="OK">OK
	</label>
</fieldset>

1
JHS

Das Hinzufügen von display:inline-block zu den Etiketten und das Zuweisen von padding-top würde dieses Problem beheben, denke ich. Auch das Einstellen von line-height auf den Etiketten würde es auch tun.

0

Ich mag es, die Eingaben in die Etiketten einzufügen (zusätzlicher Bonus: Jetzt brauchen Sie nicht das for-Attribut auf dem Etikett), und fügen Sie vertical-align: middle in die Eingabe ein.

label > input[type=radio] {
    vertical-align: middle;
    margin-top: -2px;
}

#d2 {  
    font-size: 30px;
}
<div>
	<label><input type="radio" name="radio" value="1">Good</label>
	<label><input type="radio" name="radio" value="2">Excellent</label>
<div>
<br>
<div id="d2">
	<label><input type="radio" name="radio2" value="1">Good</label>
	<label><input type="radio" name="radio2" value="2">Excellent</label>
<div>

(Der -2px margin-top ist Geschmackssache.)

Eine andere Option, die ich wirklich mag, ist die Verwendung einer Tabelle. (Halten Sie Ihre Tongabeln! Es ist wirklich schön!) Das bedeutet, dass Sie das Attribut for zu allen Ihren Labels und ids zu Ihren Eingaben hinzufügen müssen. Ich habe diese Option für Etiketten mit langem Textinhalt über mehrere Zeilen empfohlen.

<table><tr><td>
    <input id="radioOption" name="radioOption" type="radio" />
    </td><td>
    <label for="radioOption">                     
        Really good option
    </label>
</td></tr></table>

0
Protector one

Zwar stimme ich zu, dass Tabellen entgegen der landläufigen Meinung nicht für Design-Layouts verwendet werden sollten, sie bestehen jedoch eine Validierung. das Tabellenkennzeichen ist nicht veraltet. Am besten richten Sie Optionsfelder aus, indem Sie das mittlere CSS mit vertikaler Ausrichtung verwenden, wobei die Ränder der Eingabeelemente angepasst werden.

0
PixelBlender