Как подчеркнуть пустое пространство в CSS?

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

То, что я собираюсь, это...

Сумма платежа: $ ___________________

До сих пор я управлял этим CSS:

<div>
    <p style="border-bottom: 1px solid black;">
        Amount Paid: $ 
    </p>
</div>

Это рисует линию к краю родительского div - который я хочу. Однако он также рисует строку под "Amount Paid: $", которую я не хочу. Каждая комбинация p s, span s и т.д. Я думал, что сбой:

Если я помещаю текст в span, который нажимает на границу, это не имеет значения, я полагаю, поскольку он все еще является частью p, и граница по-прежнему рисуется.

Я могу добавить подчеркивание к пробелу после текста, но это не работает. Кажется, что требуется только подчеркнуть пустое пространство, когда стиль границы находится в элементе p.

Аналогично, если я заменил p на span, он не получит заметку о том, что она должна полностью расширять границу:

<p>
    <span>Amount Paid: $ </span>
    <span style="border-bottom: 1px solid black;"> </span>
</p>

Ничего не делает. Линия никогда не рисуется. Если я добавлю письмо ко второму пролету, оно будет нарисовано под этим, но не более. И если я заменю p на что-нибудь еще, например, divs или spanans, это не похоже на работу...

Любые идеи? Спасибо заранее.

Ответ 1

Измените display (CSS) второго диапазона на inline-block и установите его width (CSS).

UPD:

Или попробуйте что-то вроде:

<p style="width: 200px; display: table;">
    <span style="display: table-cell; width: 100px;">Amount Paid: $ </span>
    <span style="display: table-cell; border-bottom: 1px solid black;"></span>
</p>

Ответ 2

Это работает в 2014 году.

Amount Paid: $ <span style="text-decoration: underline; white-space: pre;">                   </span>

Ответ 3

Если вы не возражаете вручную указывать ширину линии, вы можете сделать это:

<span style="border-bottom: 1px solid black; padding-left: 50px">&nbsp;</span>

Ответ 4

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

<p>
    <span>Amount Paid: $ </span>
    <span style="border-bottom: 1px solid black; min-width: 100px;"> </span>
</p>

Обратите внимание, что для IE7 вам нужно добавить элемент overflow: visible в элемент min-width, чтобы он правильно обрабатывал минимальную ширину, в отличие от по умолчанию (багги) поведения обработки его как ширины.

Ответ 5

Другое решение с использованием disply: flex; и flex-grow:

.container {
    width: 200px;
}

.row {
    display: flex;
}

.underline {
    flex-grow: 1;
    border-bottom: 1px solid black;
    margin-left: 5px;
}

<div class='container'>
    <div class='row'>
        <div class='label'>Count:</div>
        <div class='underline'></div>
    </div>
    <div class='row'>
        <div class='label'>Amount Paid:</div>
        <div class='underline'></div>
    </div>
</div>