2

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

这是我的表格

<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;
}
4

5 回答 5

5

你不能给width一个inline元素。如果您希望它内联并具有宽度，则必须将其设置display为。inline-block

将您的 CSS 更改为

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

让它工作。

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

于 2012-07-20T08:55:46.920 回答
2

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

不要将显示设置为内联。您可能更喜欢 inline-block 。

于 2012-07-20T08:55:59.663 回答
1

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

于 2012-07-20T08:56:40.620 回答
0

请使用这个。

label {

    width: 200px ;
    display:inline;
    float:left;
}
​input[type="text"]{
    float:left;
}​
于 2012-07-20T09:00:01.887 回答
0

无论如何label已经是一个内联元素，所以没有使用将样式设置为display:inline;.

如果要添加宽度，请先使元素成为块元素。你可以通过使用display:inline-block或使用来做到这一点display:block; & float:left;

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

于 2012-07-20T09:01:07.117 回答