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

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

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>

如果有人能帮我使它在IE中也能很好地工作，我将非常感激。我也想知道为什么它在任何地方都可以使用，除了IE:）。

您可以随时使用它创建样式化的复选框

他们说他们设计的复选框在IE中工作

---

我希望这能帮助你

这将解决IE中的问题

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

clear

使元素下降到任何浮动元素的下方 在文档的前面加上它。
中提供了一个很好的诊断示例

在IE中检查此项。

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>

---

工作

简洁、简单的答案。令人惊叹的。谢谢@我很高兴能帮上忙。谢谢你的回答。最终在概念上与user1671639提供的非常相似，但是他们的答案只需要一行css，而不是HTML中的附加div。对你的努力投了赞成票。谢谢伊奇里斯坦，但不是我想要的。

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

#options label {
  float: left;
}

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