使用 CSS 水平对齐标签答案

【问题标题】：Horizontally Align Labels with CSS使用 CSS 水平对齐标签
【发布时间】：2014-04-11 00:04:14
【问题描述】：

我有一个问题，我很想通过使用 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 元素。

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

【问题讨论】：

标签： html css

【解决方案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

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢，根据我的更新，有没有办法做到这一点而不必设置我的“标题”标签的宽度？

【解决方案3】：

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

我希望它能澄清答案。

所以你必须在你的代码中使用这个 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?*/
    }

【讨论】：

谢谢，所以我是否坚持设置标签的宽度来完成这项工作？
@ledbutter 根据 HTML 代码，我猜你想制作一个表单。你可以使用 float:left 并给出 padding 或 margin 但这不会产生任何影响，除非你定义width 属性到 label .. 为什么你不想避免 width 属性？
我想避免 width 属性，这样如果我得到一个超出我设定宽度的“标题”，我就不会得到不想要的输出。同时，为了便于阅读，我希望这两个标签之间的间距合理。
就可用性而言，您应该将标签向右移动。如果你不使用宽度，你会得到这种结果。检查演示。 jsbin.com/sexenuga/1/edit

【解决方案4】：

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

【讨论】：