Easy HTML underline

Question

Я создаю форму в HTML, которая будет напечатана, с полями, которые должны быть записаны получателем. В основном, я хочу, это одна строка, которая простирается от конца метки поля в сторону страницы. Вот как я это делаю прямо сейчас:

<table width="100%"> 
    <tr> 
     <td width="1%"> 
      Label: 
     </td> 
     <td style="border-bottom-style:solid; border-bottom-width:1px;"> 
      &nbsp; 
     </td> 
    </tr> 
</table> 

Это работает, но должна быть более простым способом сделать это без необходимости всего элемента таблицы. Есть идеи?

Answer 1

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

Ваше решение будет иметь лучшее выравнивание, чем использование пролетов. Ваш код будет выглядеть более чистым с элементами таблицы, чем с пролетами.

Кроме того, вы можете рассмотреть возможность размещения текстового поля в своей ячейке, чтобы ваши пользователи могли вводить информацию непосредственно на странице перед печатью.

Answer 2

Как насчет использования тега span?

<span style="border-bottom....">Text</span> 

Answer 3

Вот мой CSS:

span.print_underline 
{ 
    display: inline-block; 
    height: 1em; 
    border-bottom: 1px solid #000; 
} 

Так что ваш HTML будет выглядеть следующим образом:

<span class="print_underline" style="width: 200px">&nbsp;</span> 

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

В качестве побочного элемента я тестировал ту же концепцию с тегом div вместо тега span, и в некоторых ситуациях он не работал. Вероятно, это связано с тем, что семантически некорректно помещать div в тег абзаца (именно поэтому я использовал диапазон), и я обычно использую теги абзацев вместо использования строк таблицы, как вы использовали.

Answer 4

только что имеет div с соответствующим краем слева. Блокированные элементы по умолчанию всегда расширяются до полной ширины.

Значение:

 

label { 
    float: left; 
} 

div { 
    margin-left: 10em; 
    border-bottom: 1px solid black; 
    height: 1em; 
} 

<label>label:</label>

<div></div>

не будет растягиваться на всю ширину между этикеткой и с правой стороны, но вы можете иметь ярлык скрыть нижнюю границу- (используя фоновый цвет или что-то еще), и div также расширяется до упора вправо (без поля).

Если вы хотите правильную семантику, вы можете использовать только вход, а не div, установите его на «блок» и исправьте границы и фон.