css - float 问题

Question

我正在努力使布局看起来像以下(粗略的)模型 lol:

--div----------------
|标签文本框 |
|标签文本框 |
|标签文本框 |
|-------------------- |

这是我的……

.personalInfo_Form
{
width:600px;
margin: auto;
padding: 20px;
background-color: White;
}

.addressLabel
{
float: left;
width: 140px;
padding: 5px;
text-align: right;
}

.addressField
{
float: left;
padding: 5px;
}

在 FireFox 中查看的最终结果是行偏移且不统一。我注意到指定一个非常具体的 div 宽度可以改变 position 的结果，这是有道理的，因为它会强制执行默认情况下元素不能重叠的 float 规则，从而将它们定位在另一个之下......但是，我想设计它使得 Div 的宽度不是内部元素定位的一个因素。

为帮助干杯!

Answer 1

将 clear: both; 或 clear: left; 添加到你的 .addressLabel 样式中。您必须通过 float 包含的 div 或提供 clearfix 来确保 div 在 float 元素之外继续。