1

我是 CSS 新手，我有一个问题。我想做一个简单的好表格，代码如下：

<form>
    <div class="row"><label for="name">Some text field</label><input type="text" name="name" /></div>
    <div class="row"><label for="surname">Some another text field</label><input type="text" name="surname" /></div>
</form>

一些CSS代码：

label {
    float: left;
    width: 230px;
    text-align: right;
    margin: 5px;
}

.row {
    clear: left;
}

我从某本书中复制并粘贴了这段代码。我理解浮动，清除，但我不明白为什么“宽度”属性与标签一起使用（因为它是内联元素），在这种情况下，为什么“宽度”在没有“浮动”的情况下不能工作？请让我清楚。谢谢

4

2 回答 2

5

Label 元素默认为inline显示模式。

内联元素不接受宽度属性，它们将以其内容的宽度呈现。

另一方面，浮动元素就像内联块。他们将接受宽度属性。

通过将float属性应用于元素，您实际上是将其display属性更改为（但不完全是）inline-block。

于 2013-08-18T09:52:18.240 回答
0

label是内联元素，所以它不接受宽度。要接受任何元素的宽度，它应该是inline-block或者block元素。并且通过将浮动设置为任何元素的行为就像这是一个inline-block元素，并且您定位绝对或固定的另一个信息也认为它是块级元素。

如果你想label接受宽度，你应该将标签定义为inline-block。

label {
    /*float: left;*/
    display: inline-block;
    width: 230px;
    text-align: right;
    margin: 5px;
}
于 2013-08-18T09:57:14.857 回答