Легкое подчеркивание HTML

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:

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 в теге абзаца (именно поэтому я использовал span), и я обычно использую теги абзаца вместо использования строк таблицы, как вы использовали.

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

Значение:

label {
    float: left;
}

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

<label>label:</label>

<div></div>

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

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