Question

假设我有两条这样的线。

Some Label: First element
            Second element

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

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

<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>

限制：某些标签的长度未知。所以我不能使用硬编码宽度。

感谢。

山姆

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/

如何使用CSS缩进2行与第2行缩进？

1 个答案: