如何包装文本以匹配缩进

Question

将缩进设置在前面的单词设置的最佳方法是什么，这样任何包装的文本都将继续使用相同的缩进。像这样：

http://i.imgur.com/61rVCQk.png

我也使用了一个JSfiddle - http://jsfiddle.net/dangoodspeed/DbYFb/1/

.left { float:left; font-weight:bold; margin-right:.5em; }

我知道我可以用每一行的表来做，但必须有更好的方法。

Answer 1

如果你浮动元素，给它们一个宽度并添加溢出：隐藏到流中的元素旁边，你得到它： http://jsfiddle.net/DbYFb/3/

.left {
    float:left;
    font-weight:bold;
    margin-right:.5em;
    width:5em;
}
.right {overflow:hidden;}

有关浮动元素的更多信息，请参阅http://css-tricks.com/all-about-floats/：）

Answer 2

根据你的截图，这似乎可以产生你需要的效果。你说你不想要桌子。那些不完全是表格，只是像表格单元格那样的div :)。

http://jsfiddle.net/DbYFb/18/

行包含在行为正常的div中，而两列都有display：table-cell以获得所需的效果。这是否比使用实际表更好，取决于您。

<div class="row">
    <div class="left">Name:</div>
    <div class="right">John Doe</div>
</div>

.row div {
    display: table-cell;
}