Встроенные эффекты подчеркивания переменной ширины в CSS

Question

Мне нужно смоделировать вид типичной бумажной формы в CSS. Он состоит из двухколоночной таблицы полей. Каждое поле состоит из имени поля (переменной ширины), за которым следует подчеркивание, которое продолжается до конца столбца. Поле может быть заполнено, и в этом случае над строкой будет какой-то текст или он может быть пустым. Если это не ясно, он - грубая идея в искусном искусстве ASCII:

Name: _______Foo_______  Age: _____17______
Location: __Melbourne__  Handedness: _Left_

(за исключением того, что подчеркивание будет продолжено под любым текстом)

Чтобы реализовать подчеркивание без текста, я полагаю, что я должен использовать границы внизу, а не текстовое оформление: подчеркивание. Кроме того, мне нужен ограниченный элемент, чтобы занять все доступное пространство. Оба из них утверждают для элемента уровня блока. Однако я не могу найти способ заставить элемент уровня блока (div, li или span, установленный для display: block или inline-block) остаться на той же строке, что и метка. Как только я даю ему ширину: 100%, он переводится. Я пробовал разные комбинации поплавков, и я не склонен делать что-либо смешное с абсолютным позиционированием. Любые рекомендации?

Answer 1

У меня есть два решения для вас. Одно приятно, но в IE не работает. Один уродлив, но, кажется, работает везде. Во-первых, хороший, используя divs и css:

<style type="text/css"> 
  .container { width:500px; }
  .field { width:240px; display:table; float:left; }
  .label { white-space:nowrap; display:table-cell; width:1px; } 
  .data { border-bottom: solid 1px black; width="100%";text-align:center; margin-left:10px; white-space:nowrap; display:table-cell; } 
  .row { display:table-row; }
</style> 

<div class="container"> 
  <div class="field"> 
    <div class="row"> 
      <div class="label">label 1</div> 
      <div class="data">data 1</div> 
    </div>
  </div>
  <div class="field"> 
    <div class="row"> 
      <div class="label">label 2</div> 
      <div class="data">data 2 </div> 
    </div>
  </div>
  <div class="field"> 
    <div class="row"> 
      <div class="label">label 3</div> 
      <div class="data">data 3 </div> 
    </div>
  </div>
  <div class="field"> 
    <div class="row"> 
      <div class="label">label 4</div> 
      <div class="data">data 4 </div> 
    </div>
  </div>
</div>

Так как IE не поддерживает ячейки таблицы (и т. Д.), Нам нужен некрасивый:

<style type="text/css">
  .table-field { width:240px; display:table; float:left; }
  .table-label { white-space:nowrap; } 
  html>body .table-label { width:1px; }  /* force firefox to shrink label to fit text */
  .table-data { border-bottom: solid 1px black; width="100%";text-align:center; white-space:nowrap; } 
</style> 

<div class="container"> 
  <table class="table-field"><tr><td class="table-label">label 1</td><td class="table-data">data 1</td></tr></table>
  <table class="table-field"><tr><td class="table-label">label 2</td><td class="table-data">data 2</td></tr></table>
  <table class="table-field"><tr><td class="table-label">label 3</td><td class="table-data">data 3</td></tr></table>
  <table class="table-field"><tr><td class="table-label">label 4</td><td class="table-data">data 4</td></tr></table>
  <table class="table-field"><tr><td class="table-label">label 5</td><td class="table-data">data 5</td></tr></table>
  <table class="table-field"><tr><td class="table-label">label 6</td><td class="table-data">data 6</td></tr></table>
</div>

В любом случае, для хорошего вида нужны цвета и поля / отступы.

Answer 2

Я немного поэкспериментировал с этим вечером, и возможно следующее. Вы можете сделать разные классы для разных размеров. Это немного лучше, чем кодировать размеры по отдельности.

Name: <hr class="fieldA" /> Email: <hr class="fieldA" />

CSS:

.fieldA {
    padding-left:120px;
    height:1px;
    display:inline-block;
    margin-bottom:0;
    color:#000000;
    backgound-color:#000000;  
}

Answer 3

Я думаю, вы могли бы установить ширину для каждого элемента индивидуально - я знаю, что это не элегантное решение, но лучше, чем использовать javascript.