css - 使用 CSS 布局字段

Question

我正在尝试像这样布局字段标签和值:

       Name: Bob
        Age: 25
 Occupation: Code Monkey

相关的 HTML 是

<div class="field">
  <span class="reset">End Time:</span>
  <span>05:00pm</span>
</div>

<div class="field">
  <span class="reset">Items:</span>
  <span></span>
</div>

<div class="field">
  <span class="reset">Repeats:</span>
  <span>Never</span>
</div>

相关的 CSS 是:

div.field {
  margin-bottom:10px;
}

span.reset {
  display: block;
  float: left;
  margin-right: 0.5em;
  text-align: right;
}

不幸的是，“重复”字段与“元素”字段显示在同一行。我确认这仅在“元素”字段的值为空时发生 <span></span> .

我试过添加clear: left至 span.reset , 虽然这会阻止两个字段出现在同一行上，但它完全打乱了标签和字段的对齐方式。

有什么方法可以在不彻底改变 XHTML 的情况下解决这个问题吗？

谢谢， 唐

Answer 1

将此添加到您的 CSS clear: left;:

div.field {
  clear:left;
  margin-bottom:10px;
}

这将强制它到下一行。