Question

我正在开发一个表单并为标签设置大小并将其对齐以便看起来不错。但是CSS没有得到应用。这是我的代码：

label{
    width: 50%;
    text-align: right;
}

Fiddle

我该如何运作？

Answer 1

尝试（我在你的小提琴中测试）

display:inline-block;

fiddle demo

Answer 2

您可以将其设为inline-block元素：

UPDATED EXAMPLE HERE

label{
    width: 50%;
    text-align: right;
    display:inline-block;
}

您需要执行此操作，因为label是inline元素，以下内容适用于此：

10 Visual formatting model details - 10.2 Content width: the 'width' property

此[width]属性不适用于未替换的内联元素。未替换的内联元素框的内容宽度是其中的呈现内容的内容宽度（在子项的任何相对偏移之前）。回想一下，内联框流入线框。线框的宽度由它们的包含块给出，但可能因浮动的存在而缩短

Answer 3

在display:inline-block Fiddle

中添加label

Answer 4

喜欢这个

<强> demo

<强> CSS

label{
    width:50%;
    text-align: right;
    border:1px solid red;
    display:inline-block;
}

Answer 5

小提琴：http://jsfiddle.net/46xF5/7/

像这样更改css代码

body{
    font-family: "Arial", Helvetica, sans-serif;
}
/*changes here*/
#book_tickets label{
    width: 50%;
    display:inline-block;
    text-align: left;
}

CSS未应用于<label> </label>

5 个答案: