使用CSS水平对齐标签

Question

我有一个问题，我想通过使用CSS来解决，而不是通过静态调整我的标签大小（但也许这是不可能的）。

我每行有两个标签，一个用于显示“标题”，另一个用于显示相关的“值”。以下是我希望它的样子：

这类似于Align labels in form next to input，但我希望每行的第二个元素左对齐而不是第一个元素右对齐。我尝试修改该问题的已接受答案并设置“标题”标签的宽度，但这对我的输出没有影响。正如我上面提到的，我宁愿不要硬编码宽度，但是我希望在尝试找到一个可以解释更大“标题”值的良好的长期解决方案之前得到一些工作。

这是我目前的CSS（这些类应该是不言自明的）：

.propertyTitle {
    text-transform: uppercase;
    width: 300px;/*Why doesn't this have any effect?*/
}
.propertyValue {
    text-align: left;
}

我目前的HTML：

<div>
    <div>
        <label class="propertyTitle">Hello:</label>
        <label class="propertyValue">World</label>
    </div>
    <div>
        <label class="propertyTitle">Goodbye:</label>
        <label class="propertyValue">To All of the People in the World</label>
    </div>
    <div>
        <label class="propertyTitle">I Want:</label>
        <label class="propertyValue">These labels to line up</label>
    </div>
</div>

HTML也可以修改，如果它更容易。为了符合最佳实践，我宁愿不使用表格来完成这项工作。

这是jsFiddle显示我现在拥有的，我缺少什么？理想情况下，此解决方案适用于IE8 +和Firefox，因此不鼓励使用HTML5和CSS3元素。

修改
在前两个答案出现之后重申（这两个问题都解决了我的问题），有没有办法在没有为我的“标题”标签硬编码宽度的情况下做到这一点？

Answer 1

将div和标签分组如下：

<div>
    <div class="titleWrap">
        <label class="propertyTitle">Hello:</label>
        <label class="propertyTitle">Goodbye:</label>
        <label class="propertyTitle">I Want:</label>
    </div>
    <div class="valueWrap">
        <label class="propertyValue">World</label>
        <label class="propertyValue">To All of the People in the World</label>
        <label class="propertyValue">These labels to line up</label>
    </div>
</div>

使用以下CSS：

.propertyTitle {
    display:block;
    text-transform: uppercase;
    width: auto;
}
.titleWrap{
    display:inline-block;
}

.propertyValue {
    display:block;
    width:auto;
}
.valueWrap {
    display:inline-block;
}

应该为您提供所需的结果，而无需指定宽度

查看此jsFiddle

Answer 2

尝试在标签上使用display：inline-block

.propertyTitle {
    text-transform: uppercase;
    width: 300px;/*Why doesn't this have any effect?*/
    display: inline-block;
}

Answer 3

默认标签为inline element。这就是width属性不适用于label的原因。 要使用label来应用您必须将block level转换为display:block元素的宽度。

我希望它澄清答案。

因此您必须在代码中使用此CSS属性。

   .propertyTitle {
     text-transform: uppercase;
    display:inline-block; /*this will make the label a block level element*/ 
    width: 300px;/*Why doesn't this have any effect?*/
    }

Answer 4

更现代的版本是 display: inline-flex;