1

我想在页面下方有一个复选框列表，其中有一个标签，如以下布局所示：

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

我正在使用此处概述的方法What is the best way to style a checkbox list in answer by @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 回答
0

您始终可以使用http://csscheckbox.com/创建样式复选框。

他们说他们的样式复选框在 IE 中工作。

我希望这能帮到您！！！

于 2013-06-26T05:32:33.607 回答