106

ラベルと同じ行にラジオボタンがあるフォームがあります。ただし、下のスクリーンショットに示すように、ラジオボタンはラベルと垂直方向に整列していません。

ラジオボタン。

ラジオボタンをラベルに垂直に揃えるにはどうすればよいですか？

編集：

これがhtmlコードです：

<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/>

そしてcssコード：

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

13 に答える 13

164

これを試して：

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}
于 2013-02-07T22:22:34.440 に答える
16 
input {
    display: table-cell;
    vertical-align: middle
}

すべてのラジオのクラスを置きます。これは、html ページのすべてのラジオ ボタンで機能します。

フィドル

于 2012-11-22T10:05:14.050 に答える
16

menuka devinda による回答を選択したことは知っていますが、その下のコメントを見て同意し、より良い解決策を考え出そうとしました。私はこれを思いつくことができました。私の意見では、それははるかにエレガントなソリューションです。

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

回答を提供してくれたすべての人に感謝します。あなたの回答は見過ごされませんでした。まだ他のアイデアがある場合は、この質問に独自の回答を自由に追加してください。

于 2012-11-22T13:52:55.430 に答える
2

入力をラベル内に配置するのが好きです (追加ボーナス: ラベルにfor属性は必要ありません)、vertical-align: middle入力を配置します。

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>

（これ-2px margin-topは好みの問題です。）

私が本当に気に入っているもう 1 つのオプションは、テーブルを使用することです。for(ピッチ フォークを保持してください! 本当に素晴らしいです!) これは、すべてのラベルに属性を追加idし、入力に s を追加する必要があることを意味します。複数行にわたる長いテキスト コンテンツを含むラベルには、このオプションをお勧めします。

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

于 2017-06-19T13:14:03.170 に答える
1

一般に信じられていることとは反対に、テーブルをデザイン レイアウトに使用すべきではないことに同意しますが、テーブルは検証に合格します。つまり、テーブル タグは非推奨ではありません。ラジオ ボタンを整列する最良の方法は、入力要素のマージンを調整して垂直整列中央 CSS を使用することです。

于 2015-11-08T11:42:55.737 に答える
1

これらの回答の多くは、を使用するように言っていますvertical-align: middle;。これにより、配置が近くなりますが、私にとってはまだ数ピクセルずれています。ラベルと無線入力の間で真の 1 対 1 の配置を取得するために使用した方法は次の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>

于 2015-07-19T23:43:35.647 に答える
-2

いくつかの方法がありますが、私が好むのは、html でテーブルを使用することです。2列の3行テーブルを追加して、ラジオボタンとラベルを配置できます。

<table border="0">

<tr>
  <td><input type="radio" name="sex" value="1"></td>
  <td>radio1</td>

</tr>
<tr>
  <td><input type="radio" name="sex" value="2"></td>
  <td>radio2</td>

</tr>
</table>
于 2012-11-22T10:00:31.233 に答える