css - 如何将 2 行与用 CSS 缩进的 2 行对齐？

Question

假设我有两条这样的线。

Some Label: First element
            Second element

第二行缩进，以便与第一个元素对齐。

这可以通过表格轻松完成。

<table>
  <tr>
    <td rowspan="2">Some Label:</td>
  </tr>
  <tr>
    <td>First element</td>
    <td>Second element</td>
  </tr>
</table>

但我不想用于对齐。

<div>
  <span>Some Label:</span>
  First element
</div>
<div>
  Second element
</div>

限制：Some Label 的长度未知。所以我不能使用硬编码宽度。

谢谢。

山姆

Answer 1

如果您将 HTML 更改为以下内容：

<div class="row">
    <div class="header">Some Label:</div>
    <div class="labels">
        <div>First element</div>
        <div>Second element</div>
        <div>Third element</div>
    </div>
</div>​

这个 CSS 可以正常工作：

.row {
    display: inline-block;
}

.header {
    float: left;
    margin-right: 5px;
}

.labels {
    float: right;
}

演示：http: //jsfiddle.net/Ludww/1/