html - 使用 HTML/CSS 将可变大小的数据/文本列表与相应的标签/文本对齐

Question

使用 CSS 将可变大小数据与相应标签（常规标签，而不是表单标签）对齐的最佳方法是什么，以实现如下所示：

       Name: James Bob
Description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
             sed diam nonummy nibh euismod tincidunt ut laoreet dolore...
         ID: 007

一个列表？嵌套div？这将是一个表格的快照，但表格总是不赞成表格数据以外的任何内容。我尝试使用浮动 div，但在中心加入它们是一场噩梦，尤其是当标签或数据长度发生变化时。

Answer 1

尝试将标签浮动到左侧，而不是使用width或min-width作为标签

<label>Blahblah : </label><input type="text" /><br />
<label>Blahblah : </label><input type="text" /><br />
<label>Blahblah : </label><input type="text" /><br />

label {
   float: left;
   width: 300px; /* You can change this accordingly */
}

Answer 2

像这个jsFiddle 示例这样的布局怎么样？

HTML

<div class="l">Name:</div>
<div class="r">James Bob</div>
<div class="l">Description:</div>
<div class="r">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore...</div>
<div class="l">ID:</div>
<div class="r">007<div>

CSS

.l {
    clear:left;
    float:left;
    width:100px;
    text-align:right;
    padding-right:10px;
}

.r {
    overflow:auto;
}