1

次のレイアウトに示すように、ラベルのあるページの下にチェック ボックスのリストを表示したいと考えています。

My options  [x] Checkbox 1
            [ ] Checkbox 2
            [ ] Checkbox 3
            [ ] Checkbox 4

ここで概説されている方法を使用しています@Magnarによる回答でチェックボックスのリストをスタイルする最良の方法は何ですか。これは正常に機能しますが、チェックボックスのテキストをラベルとしてラップすると、チェックボックスが IE のページ全体に水平にリストされます (Chrome と Firefox では引き続き正常にレンダリングされます)。

私のHTML：

<div id="options">
  <label>My options</label>
  <ul>
    <li><label><input type="checkbox">Checkbox 1</label></li>
    <li><label><input type="checkbox">Checkbox 2</label></li>
    <li><label><input type="checkbox">Checkbox 3</label></li>
    <li><label><input type="checkbox">Checkbox 4</label></li>
  </ul>
</div>

私のCSS：

#options label {
  float: left;
}

#options ul {
  margin: 0;
  list-style: none;
  float: left;
}

誰かがIEでもうまく動作させるのを手伝ってくれたら、本当に感謝しています。また、IE以外のどこでも機能する理由も知りたいです:)。

4

3 に答える 3

2

これにより、IE の問題が解決されます。

#options label {
  float: left;
  clear: left;
}

clear要素を、ドキュメント内でその前にあるフロート要素の下にドロップします。
良い図の例はhttps://stackoverflow.com/a/1012141/1671639にあります。

IE でこのJSFiddleを確認します。

于 2013-06-26T05:33:55.087 に答える
1

html

<div id="options">
  <label>My options</label>
  <ul>
    <li>
           <input type="checkbox">
           <label>Checkbox 1</label>
           <div style="clear:both"></div>
        </li>
    <li>
        <input type="checkbox">
        <label>Checkbox 2</label>
        <div style="clear:both"></div>
    </li>
    <li>
        <input type="checkbox">
        <label>Checkbox 3</label>
        <div style="clear:both"></div>
    </li>
    <li>
        <input type="checkbox">
        <label>Checkbox 4</label>
        <div style="clear:both"></div>
    </li>
  </ul>
</div>

CSS

#options label {
  float: left;
}

#options ul {
  margin: 0;
  list-style: none;
  float: left;
}
#options ul input{
    float:left;
}

ワーキングデモ

于 2013-06-26T05:43:27.410 に答える