Question

我是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;
}

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

Answer 1

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

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

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

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

Answer 2

label是内联元素，因此它不接受宽度。要接受任何元素的宽度，它应该是inline-block或block元素。通过将 float 设置为任何元素，行为就像这是一个inline-block元素，另外一个信息对于你的位置绝对或固定也认为它是一个块级元素。

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

label {
    /*float: left;*/
    display: inline-block;
    width: 230px;
    text-align: right;
    margin: 5px;
}

为什么没有float的标签的宽度CSS属性不起作用？

2 个答案: