对齐标题旁边的文字

Question

我确定之前已经问过这个问题，但我不太确定如何说出我的搜索结果。

我想要一份事实清单，左边是标题，右边是信息。这就是我到目前为止所做的：

但是，如果我在右边放了太多文字，它就不能保持正确对齐，而是在标题之下。

如何让文字在右边保持对齐？这是我正在使用的CSS：

.about-fact {
    border-bottom: 1px dotted #aaa;
    padding: 10px 0;
}
.about-headline {
    display: inline-block;      /* Aligns the content to be the same */
    width: 100px;
    float:left;
    font-weight: bold;
}
.about-value {

}

示例HTML：

<div class="about-fact">
    <div class="about-headline">Profession:</div>
    <div class="about-value">Studying Computer Science at Carleton University</div>
</div>
<div class="about-fact">
    <div class="about-headline">Experience:</div>
    <div class="about-value">Resume</div>
</div>

Answer 1

建议

1. 将overflow: hidden;添加到父级。
2. 删除inline-block;。
3. 将float和width添加到.about-value。

更改CSS以包含浮动。

.about-fact {
    border-bottom: 1px dotted #aaa;
    padding: 10px 0;
    overflow: hidden;
}
.about-headline {
    width: 100px;
    float: left;
    font-weight: bold;
}
.about-value {
    float: left;
    width: auto;
}

Answer 2

让我们首先使标记更具语义性：

<dl class="about-facts">
    <dt>Profession:</dt>
    <dd>Studying Computer Science at Carleton University</dd>
    <dt>Experience:</dt>
    <dd>Resume</dd>
</dl>​

当然，这也需要对CSS进行更改。因为不再包裹div，要让边框一直延伸到左边，我们需要设置padding-left而不是margin-left：

.about-facts dt {
    padding: 10px 0;
}
.about-facts dt {
    width: 100px;
    float: left;
    font-weight: bold;
}
.about-facts dd {
    padding: 10px 0 10px 120px;
    border-bottom: 1px dotted #aaa;
}

JSFiddle：http://jsfiddle.net/ekMZ6/1/

Answer 3

试试这个css

.about-value {
    margin-left: 100px;
}​

演示：http://jsfiddle.net/k4aQ5/