Question

我有一个HTML表单[here] [1]。我将标签的显示设置为inline和width设置为200px，但它没有获得宽度。我怎样才能给它宽度以便它呢？

这是我的form

<form>
<div>
    <label>Name</label>
    <input type="text" />
    <label>Organization</label>
    <input type="text" />
</div>
<div>
    <label>E-mail</label>
    <input type="text" />
    <label>Phone</label>
    <input type="text" />
</div>
</form>

CSS：

label {
    display: inline;
    width: 200px;
}

Answer 1

您无法将width提供给inline元素。如果您希望其内嵌并且具有宽度，则必须将其display设置为inline-block。

将CSS更改为

label {
    display: inline-block;
    width: 200px;
}

让它发挥作用。

现场演示：http://dabblet.com/gist/3149758

Answer 2

width属性不适用于内联的非替换元素。

不要将显示设置为内联。你可能会喜欢内联块。

Answer 3

内联属性不会读取宽度。您需要使用display: block;或display: inline-block;来读取宽度。

Answer 4

请使用此。

label {

    width: 200px ;
    display:inline;
    float:left;
}
input[type="text"]{
    float:left;
}

Answer 5

无论如何标签已经是内嵌元素，因此不会将设置样式用于display:inline;。

如果要添加宽度，请先将元素设为块元素。您可以使用display:inline-block或使用display:block; & float:left;

来执行此操作

小提琴演示： http://jsfiddle.net/surendraVsingh/eZH5C/1/

表单标签在css中没有获得宽度

5 个答案: