Html 对齐标题旁边的文本

我肯定以前有人问过这个问题，但我不太确定如何用词来表达我的搜索

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

然而，如果我把太多的文字放在右边，它不会保持对齐，而是放在标题下

如何使文本保持右侧对齐？以下是我正在使用的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>

职业：
在卡尔顿大学学习计算机科学
经验：
简历

建议

添加

溢出：隐藏到父级

删除

内联块

将

float

和

width

添加到

.about value

中

更改CSS以包含浮动。 建议

添加

溢出：隐藏到父级

删除

内联块

将

float

和

width

添加到

.about value

中

更改CSS以包含浮动。 试试这个css

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

演示：

试试这个css

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

---

演示：

让我们先让标记更具语义：

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

---

jsiddle:

让我们先让标记更具语义：

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

---

jshiddle:

我喜欢这个答案，但是当文本很长时，它会放在标题下面，而不是旁边。我必须接受另一个对我有效的答案。嘿，你需要指定宽度。：）我喜欢这个答案，但当文章很长时，它会放在标题下面，而不是旁边。我必须接受另一个对我有效的答案。嘿，你需要指定宽度。：）