html - 表单上的 float 标签和 Div

Question

我的页面上有一个表单，我想要定位所有文本框，使左边缘全部相互对齐。

我编写了以下代码，在 Firefox 中运行良好:

<style type="text/css">
label {
    float: left;
    clear: both;
    width: 250px;
    margin-top: 10px;
}

input {
    float: left;
    margin-top: 10px;
}
</style>



<label>First Name:</label>
<input type="text" name="fname">

<label>Last Name:</label>
<input type="text" name="lname">

<label>Phone Number:</label>
<input type="text" name="phone">

但是，当在 IE6 中查看时，文本框全部位于一行，标签的位置按照我想要的方式放置。我已经尝试解决这个问题几个小时了，我唯一能想到的就是在每个标签/文本框组合之间放置一个跨度，以清除 float ，如下所示:

<label>First Name:</label>
<input type="text" name="fname">

<span style="clear: both;"></span>

<label>Last Name:</label>
<input type="text" name="lname">

<span style="clear: both;"></span>

<label>Phone Number:</label>
<input type="text" name="phone">

但是我知道这是不正确的，因为不允许有空元素。有什么想法可以解决我的问题并在两个浏览器中获得相同的布局。

谢谢

Answer 1

您可以将每组标签/输入包装在一个 div 中，并在 div 上而不是标签上使用 clear:left。

label {
    float: left;
    width: 250px;
    margin-top: 10px;
}

input {
    float: left;
    margin-top: 10px;
}
div {
  clear: left;
}

希望有帮助。