Question

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

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

我在@Magnar的回答中使用了此处列出的方法What is the best way to style a list of checkboxes。这样可以正常工作，但是当我将复选框文本作为标签包装时，复选框在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：）。

Answer 1

这将解决IE中的问题。

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

clear使元素落在任何浮动元素下方   在文件中先于它。
  https://stackoverflow.com/a/1012141/1671639中提供了一个很好的图解示例。

在IE中查看此JSFiddle。

Answer 2

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;
}

工作Demo

Answer 3

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

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

我希望这会对你有帮助!!!

使用标签设置复选框列表样式

3 个答案: