макет полей с помощью 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;
}

К сожалению, поле «Repeats» отображается в той же строке, что и поле «Items».Я проверил, что это происходит только тогда, когда значение поля «Элементы» пусто <span></span>.

Я попытался добавить clear: left к span.reset, и пока это останавливает появление двух полей в одной строке,это полностью портит выравнивание надписей и полей.

Можно ли как-нибудь исправить эту проблему без радикального изменения XHTML?

Спасибо, Дон

Answer 1

Добавьте это к вашему CSS clear: left;:

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

Это приведет к следующей строке ниже.

Answer 2

Если вы хотите, чтобы все это выстраивалось в линию, вам придется дать метке (сбросить) фиксированную ширину, прямо или косвенно. Попробуйте это:

div.field { overflow: hidden; }
div.field span { margin-left: 150px; display: block; }
span.reset { float: right; width: 150px; margin-left: 0; text-align: right; }