Question

我有以下结构：

<form>
<ul>
<li>
<label for="#id">Item</label>
<input type="text" id="#id"/>
</li>
<li>
<label for="#id">Item</label>
<input type="text" id="#id"/>
</li>
</ul>
</form>

标签上有以下css：

width: 250px;
float: left;
display: block;

在所有浏览器中我都有：

label input
label input

在IE9中我有类似的东西：

label input
      label
input 
label input

有人可以帮忙吗？

Answer 1

你可以清除li的浮动，你的问题就解决了

label {
    width: 250px;
    float: left;
    display: block;
}

li {
    clear: both;
    overflow: hidden;
}

Answer 2

你需要在浮动时清除：

css clearfix：

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

对html的更改：

<form>
 <ul>
  <li class="clearfix">
   <label for="id">Item</label>
   <input type="text" id="id">
  </li>
 <li class="clearfix">
   <label for="id1">Item</label>
   <input type="text" id="id1">
  </li>
 </ul>
</form>

有些评论，你的身份证是错误的，他们必须以一封信开头。

IE9中的CSS <label> float </label>

2 个答案: