1

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

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

这就是我想要的样子

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

看起来不对

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

3 回答 3

3

建议

  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;
}
于 2013-01-01T15:43:35.410 回答
2

让我们首先让标记更加语义化：

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

当然，这也需要对 CSS 进行更改。因为不再有 wrapping div，要让边框一直向左延伸，我们需要设置padding-leftnot 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/

于 2013-01-01T15:56:17.120 回答
1

试试这个 CSS

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

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

于 2013-01-01T15:46:05.370 回答