これは、常に私を悩ませているマイナーな CSS の問題の 1 つです。
スタック オーバーフローの周りの人々はどのように垂直方向に整列checkboxesし、labels一貫してクロスブラウザーを使用していますか?
Safari で (通常は を使用vertical-align: baselineしてinput) 正しく配置すると、Firefox と IE では完全にオフになります。
Firefox で修正すると、Safari と IE は必然的にめちゃくちゃになります。フォームをコーディングするたびに、これに時間を浪費します。
私が使用する標準コードは次のとおりです。
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>私は通常、Eric Meyer のリセットを使用するので、フォーム要素は比較的オーバーライドされていません。あなたが提供しなければならないヒントやトリックを楽しみにしています！
私はこの回答の投稿者ではありませんが、これを書いている時点では、これは賛成票と反対票の両方で最も投票された回答であり (+1035 -17)、まだ承認済みの回答としてマークされています (おそらく質問の元の投稿者は、この回答を書いた人です)。
コメントで何度も指摘されているように、この回答はほとんどのブラウザーでは機能しなくなりました (2013 年以降は機能していないようです)。
さまざまなスタイルのマークアップを 1 時間以上調整し、テストし、試してみた結果、適切な解決策が得られると思います。この特定のプロジェクトの要件は次のとおりです。
説明に入る前に、コードを示します。
label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>JSFiddleの実際の例を次に示します。
このコードは、フォームの入力マージンとパディングを上書きしない Eric Meyer のようなリセットを使用していることを前提としています (したがって、入力 CSS にマージンとパディングのリセットを配置します)。明らかに、ライブ環境では、他の入力要素をサポートするためにネスト/オーバーライドする可能性がありますが、私は物事をシンプルに保ちたいと思っていました.
注意事項:
*overflowインライン IE ハック (スター プロパティ ハック) です。IE 6 と 7 の両方がそれを認識しますが、Safari と Firefox は適切に無視します。有効な CSS かもしれないと思いますが、条件付きコメントを使用したほうがよいでしょう。簡単にするためにそれを使用しました。vertical-alignブラウザー間で一貫していた唯一のステートメントはvertical-align: bottom. これを設定して相対的に上に配置すると、Safari、Firefox、および IE でほぼ同じように動作し、わずか 1 ～ 2 ピクセルの差異がありました。overflow: hidden何らかの理由で余分なスペースが削除され、IE の配置が Safari や Firefox と非常によく似た動作をするようになります。これが他の誰かに役立つことを願っています! 今朝取り組んでいたプロジェクト以外で、この特定のテクニックを試したことはありません。
vertical-align が適切に機能するために、2 つのインライン (スパン、ラベル、入力など) 要素が隣り合っている必要がある場合があります。次のチェックボックスは、IE、Safari、FF、および Chrome で、テキスト サイズが非常に小さいまたは大きい場合でも、垂直方向に適切に中央揃えされます。
それらはすべて同じ行に並んでいますが、nowrap はラベル テキスト全体が常にチェックボックスの横にあることを意味します。
欠点は、余分な無意味な SPAN タグです。
.checkboxes label {
display: inline-block;
padding-right: 10px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}<form>
<div class="checkboxes">
<label><input type="checkbox"> <span>Label text x</span></label>
<label><input type="checkbox"> <span>Label text y</span></label>
<label><input type="checkbox"> <span>Label text z</span></label>
</div>
</form>ここで、チェックボックスの下で折り返さずに折り返す必要がある非常に長いラベル テキストがある場合は、ラベル要素にパディングと負のテキスト インデントを使用します。
.checkboxes label {
display: block;
padding-right: 10px;
padding-left: 22px;
text-indent: -22px;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}<form>
<div class="checkboxes">
<label><input type="checkbox"> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
<label><input type="checkbox"> <span>Label text y</span></label>
<label><input type="checkbox"> <span>Label text z</span></label>
</div>
</form>One Crayonのソリューションを利用して、私には自分に合った、よりシンプルなものがあります。
.font2 {font-family:Arial; font-size:32px} /* Sample font */
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
input[type=radio] {
bottom: 2px;
} <label><input type="checkbox" /> Label text</label>
<p class="font2">
<label><input type="checkbox"/> Label text</label>
</p>Safari（ベースラインが信頼できる）でピクセルごとに同じようにレンダリングし、FirefoxとIE7の両方が良好にチェックアウトします。また、大小さまざまなラベルフォントサイズでも機能します。さて、選択と入力に関するIEのベースラインを修正するために...
更新:(サードパーティの編集）
適切なbottom位置は、フォントファミリとフォントサイズによって異なります。bottom: .08em;チェックボックスとラジオ要素に使用することは、一般的な値として適切であることがわかりました。いくつかの小/中/大フォントサイズを使用して、ArialおよびCalibriフォントを使用するWindowsのChrome / Firefox/IE11でテストしました。
.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: .08em; /* this is a better value for different fonts! */
}<label><input type="checkbox" /> Label text</label>
<p class="font2">
<label><input type="checkbox"/> Label text</label>
</p>うまくいくと思われる簡単なことの 1 つは、チェックボックスの垂直方向の位置を垂直方向に調整することです。ブラウザによって異なりますが、ソリューションは複雑ではありません。
input {
vertical-align: -2px;
}
試すvertical-align: middle
また、あなたのコードは次のように思われます:
<form>
<div>
<input id="blah" type="checkbox"><label for="blah">Label text</label>
</div>
</form>私のソリューションを試してみてください。IE 6、FF2、および Chrome で試してみましたが、3 つのブラウザすべてでピクセル単位でレンダリングされます。
* {
padding: 0px;
margin: 0px;
}
#wb {
width: 15px;
height: 15px;
float: left;
}
#somelabel {
float: left;
padding-left: 3px;
}<div>
<input id="wb" type="checkbox" />
<label for="wb" id="somelabel">Web Browser</label>
</div>私にとって完全に機能する唯一の解決策は次のとおりです。
input[type=checkbox], input[type=radio] {
vertical-align: -2px;
margin: 0;
padding: 0;
}
今日、Chrome、Firefox、Opera、IE 7 および 8 でテスト済み。例: Fiddle
ソリューションを完全にテストしたわけではありませんが、うまく機能しているようです。
私のHTMLは単純です：
<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
次に、すべてのチェックボックスを24px高さと幅の両方に設定します。テキストを揃えるために、ラベルline-heightも作成し、次のよう24pxに割り当てます。vertical-align: top;
編集: IE のテスト後vertical-align: bottom;、入力に追加し、ラベルの CSS を変更しました。パディングを整理するために条件付き IE css ケースが必要な場合がありますが、テキストとボックスはインラインです。
input[type="checkbox"] {
width: 24px;
height: 24px;
vertical-align: bottom;
}
label.checkbox {
vertical-align: top;
line-height: 24px;
margin: 2px 0;
display: block;
height: 24px;
}<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>これが機能しないことがわかった場合は、親切にお知らせください。実際の動作は次のとおりです (Chrome と IE の場合 - スクリーンショットは Retina で撮影され、IE ではパラレルを使用しているため、お詫びします):
私は通常、静的テキストの垂直位置を調整するために行の高さを使用します。
label {
line-height: 18px;
}
input {
width: 13px;
height: 18px;
font-size: 12px;
line-height: 12px;
}<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>それが役立つことを願っています。
<form>
<div>
<label style="display: inline-block">
<input style="vertical-align: middle" type="checkbox" />
<span style="vertical-align: middle">Label text</span>
</label>
</div>
</form>秘訣は、ラベル タグを使用する場合は、テーブル セルまたはインライン ブロックでのみ vertical-align を使用することです。
これが一番楽な方法だと思います
input {
position: relative;
top: 1px;
}<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
<form>要素をそのレベルで他のすべての上にレンダリングするため、相対的な配置は好きではありません (複雑なレイアウトがある場合は、何かの上に表示される可能性があります)。
私はvertical-align: sub、Chrome、Firefox、Opera でチェックボックスが適切に配置されていることを発見しました。MacOS を持っておらず、IE10 がわずかにオフになっているため、Safari を確認できませんが、私にとっては十分な解決策であることがわかりました。
別の解決策は、すべてのブラウザーに固有の CSS を作成して、%/pixels/EMs で垂直方向に配置して微調整することです: http://css-tricks.com/snippets/css/browser-specific-hacks/
これは私にとってはうまくいきます：
fieldset {
text-align:left;
border:none
}
fieldset ol, fieldset ul {
padding:0;
list-style:none
}
fieldset li {
padding-bottom:1.5em;
float:none;
clear:left
}
label {
float:left;
width:7em;
margin-right:1em
}
fieldset.checkboxes li {
clear:both;
padding:.75em
}
fieldset.checkboxes label {
margin:0 0 0 1em;
width:20em
}
fieldset.checkboxes input {
float:left
}<form>
<fieldset class="checkboxes">
<ul>
<li>
<input type="checkbox" name="happy" value="yep" id="happy" />
<label for="happy">Happy?</label>
</li>
<li>
<input type="checkbox" name="hungry" value="yep" id="hungry" />
<label for="hungry">Hungry?</label>
</li>
</ul>
</fieldset>
</form>ASP.NET Webフォームを使用する場合は、DIVやその他の要素や固定サイズについて心配する必要はありません。CSSでCheckboxList入力タイプに<asp:CheckBoxList>設定することで、テキストを整列させることができます。float:left
次のサンプルコードを確認してください。
.CheckboxList
{
font-size: 14px;
color: #333333;
}
.CheckboxList input
{
float: left;
clear: both;
}
.ASPXコード：
<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>
私はこのようにそれを行うことに問題があったことはありません:
<form>
<div>
<input type="checkbox" id="cb" /> <label for="cb">Label text</label>
</div>
</form>
入力タイプのチェックボックスがラベルの内側にラップされ、次のように左にフロートされます。
<label for="id" class="checkbox">
<input type="checkbox" id="id">
<span>The Label</span>
</label>
これは私のために働いた：
label.checkbox {
display: block;
}
.checkbox input {
float: left;
height: 18px;
vertical-align: middle;
}
.checkbox span {
float: left;
line-height: 18px;
margin: 0 0 0 20px;
}
の高さが (blocklevel) の行の高さと同じであることを確認してください。
input[type=checkbox]
{
vertical-align: middle;
} <input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>Twitter Bootstrap を使用している場合は、次のcheckboxクラスで使用でき<label>ます。
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
私は通常、チェックボックスにラベルを付けずに、その「ラベル」を別の要素にします。面倒ですが、チェックボックスとそのラベルの表示方法にはブラウザー間の違いが非常に大きいため（お気づきのとおり）、これがすべての外観を制御するための唯一の方法です。
同じ理由で、私もwinforms開発でこれを行うことになります。チェックボックスコントロールの根本的な問題は、ボックスとラベルの2つの異なるコントロールであるということだと思います。チェックボックスを使用することで、コントロールの実装者に任せて、これら2つの要素を並べて表示する方法を決定します（そして、間違っている場合は常に間違っています=あなたが望むものではありません）。
私は本当に誰かがあなたの質問に対してより良い答えを持っていることを願っています。
だから私はこれが何度も答えられていることを知っていますが、私はすでに提供されているものよりもはるかにエレガントなソリューションを持っていると感じています. そして、1 つのエレガントなソリューションだけでなく、あなたの空想をくすぐる 2 つの個別のソリューションもあります。そうは言っても、知って見なければならないことはすべて、コメント付きの 2 つの JS Fiddle に含まれています。
解決策 #1 は、特定のブラウザーのネイティブの「チェックボックス」に依存していますが、ひねりを加えています...クロスブラウザーを配置しやすい div に含まれています。 （これはFFの醜い境界線が見えないようにするためです）
シンプルな HTML: (リンクをたどって、コメント付きの CSS を確認します。コード ブロックは、stackoverflow を満たすためのものです) http://jsfiddle.net/KQghJ/
<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>
解決策 2 では、「Checkbox Toggle Hack」を使用して DIV の CSS 状態を切り替えます。これはブラウザ全体で適切に配置されており、チェックボックスのチェックされていない状態とチェックされている状態の単純なスプライトを使用して設定します。必要なのは、前述の Checkbox Toggle Hack を使用して背景位置を調整することだけです。私の意見では、これはチェックボックスとラジオをより細かく制御できるため、より洗練されたソリューションであり、ブラウザー間で同じように見えることを保証できます。
シンプルな HTML: (リンクをたどってコメント付きの CSS を確認します。コード ブロックは StackOverflow を満たすためのものです) http://jsfiddle.net/Sx5M2/
<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>
誰かがこれらの方法に同意しない場合は、コメントを残してください。なぜ他の人がこれらの解決策に出くわしていないのか、または彼らがいる場合、なぜここに答えがないのかについてのフィードバックを聞きたいです? これらの方法のいずれかが失敗するのを見た人がいれば、それも見てみたいと思いますが、これらは最新のブラウザーでテストされており、私が見た限りではかなり古く、普遍的な HTML / CSS メソッドに依存しています。
CSS:
.threeCol .listItem {
width:13.9em;
padding:.2em;
margin:.2em;
float:left;
border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
float:left;
width:auto;
margin:.2em .2em .2em 0;
border:none;
background:none;
}
.threeCol label {
float:left;
margin:.1em 0 .1em 0;
}
HTML:
<div class="threeCol">
<div class="listItem">
<input type="checkbox" name="name" id="id" value="checkbox1" />
<label for="name">This is your checkBox</label>
</div>
</div>
上記のコードは、リスト アイテムを 3 つの列に配置し、幅を変更するだけです。
position: relative;IEでz-indexやjQueryのslideUp/slideDownなどのアニメーションにいくつかの問題があります。
CSS：
input[type=checkbox], input[type=radio] {
vertical-align: baseline;
position: relative;
top: 3px;
margin: 0 3px 0 0;
padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
vertical-align: middle;
position: static;
margin-bottom: -2px;
height: 13px;
width: 13px;
}
jQuery：
$(document).ready(function () {
if ($.browser.msie && $.browser.version <= 7) {
$('input[type=checkbox]').addClass('ie7');
$('input[type=radio]').addClass('ie7');
}
});
で使用されているフォントサイズに応じて、スタイリングを微調整する必要があります。<label>
PS：IE6でcssを機能させるためにie7js
を使用しています。
わあ、ありがとう！これもまた、私を永遠に夢中にさせてきました。
私の特定のケースでは、これは私のために働いた：
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: top;
position: relative;
*top: 1px;
*overflow: hidden;
}
label {
display: block;
padding: 0;
padding-left: 15px;
text-indent: -15px;
border: 0px solid;
margin-left: 5px;
vertical-align: top;
}
違いのいくつかを説明するかもしれないreset.cssを使用していますが、これはうまくいくようです。
これは問題を解決する最善の方法ではありません
vertical-align: middle
style="position:relative;top:2px;"入力ボックスに追加すると、下に移動し2pxます。そのため、フォント サイズに応じて移動できます。
もしかしたら、私と同じ過ちを犯している人々がいるかもしれません。それは...入力ボックスの幅を設定していたのは、ほとんどが 'text' 型だったからですが、チェックボックスの幅をオーバーライドするのを忘れていたので、チェックボックスが多くの余分な幅を占有しようとしていたためです。その横にラベルを揃えるのが大変でした。
.checkboxlabel {
width: 100%;
vertical-align: middle;
}
.checkbox {
width: 20px !important;
}
<label for='acheckbox' class='checkboxlabel'>
<input name="acheckbox" id='acheckbox' type="checkbox" class='checkbox'>Contact me</label>
IE6 (クラス セレクターを使用) までさかのぼり、Firefox、Safari、および Chrome の最新バージョンで、クリック可能なラベルと適切な配置を提供します。
<fieldset class="checks">
<legend>checks for whatevers</legend>
<input type="" id="x" />
<label for="x">Label</label>
<input type="" id="y" />
<label for="y">Label</label>
<input type="" id="z" />
<label for="z">Label</label>
</fieldset>
とにかく、独自のフィールドセットにグループ化されたフォームコントロールをラップする必要があります。ここでは、ラッパーを再生します。入力/ラベルを設定してdisplay:blockを入力し、フロートを左に入力し、ラベルを右にフロートし、幅を設定し、左右の余白で間隔を制御し、それに応じてラベルテキストを揃えます。
それで
fieldset.checks {
width:200px
}
.checks input, .checks label {
display:block;
}
.checks input {
float:right;
width:10px;
margin-right:5px
}
.checks label {
float:left;
width:180px;
margin-left:5px;
text-align:left;
text-indent:5px
}
クロスブラウザー/メディア ソリューションの場合は、おそらく両方で境界線、アウトライン、および行の高さを設定する必要があります。
ほとんどすべてのブラウザーで同じ結果が得られる方法を 1 つ見つけました。少なくとも最新のブラウザ。Firefox、Chrome、Safari、Opera で動作します。IE では、入力またはラベルにルールが適用されていないかのように見える (つまり、入力の数ピクセル下にラベルがまだある) ので、それは許されると思います。
HTML
<label class="boxfix"><input type="radio">Label</label>
CSS
.boxfix {
vertical-align: bottom;
}
.boxfix input {
margin: 0;
vertical-align: bottom;
position: relative;
top: 1.999px; /* the inputs are slightly more centered in IE at 1px (they don't interpret the .999 here), and Opera will round it to 2px with three decimals */
}
input {
margin: 0;
}
実際にトリックを行います