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？这对于表格来说是轻而易举的事，但除了表格数据之外，表格总是不受欢迎。我尝试使用 float 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 */
}