Question

我正在制作一份应该可以从网络浏览器打印的报告。在底部是收件人填写的字段，因此它带有下划线。我宁愿不要注意一定数量的下划线，无论如何它们似乎都有空隙。

我想要的是......

支付金额：$ _ __ _ __ _ __ _ __ _ __ _ ___

到目前为止，我已经管理了这个CSS：

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

它绘制一条线到父div的边缘 - 我想要的。但是，它也在“Amount Paid：$”下画了一条线，这是我不想要的。我认为p s，span等的每个组合都失败了：

如果我将文字放在一个核心边界的span中，那么无关紧要，我想因为它仍然是p的一部分而且仍然绘制了边框。

我可以在文本后面添加下划线，但这不起作用。当边框样式位于p元素中时，似乎只想要为空格加下划线。

同样，如果我用p替换span，它就不会得到它应该一直扩展边框的备忘录：

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

什么都不做。该线永远不会被绘制。如果我在第二个跨度中添加一个字母，则会在此下面绘制，但不会更多。如果我将p替换为div或span之类的其他东西，它似乎也不起作用......

有什么想法吗？提前谢谢。

Answer 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>

Answer 2

这适用于2014年。

＆＃13;

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

＆＃13;

Answer 3

如果您不担心支持旧浏览器（IE6代），则始终使用min-width属性来获取默认的空白空间，并根据需要进行扩展。

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

请注意，对于IE7，您必须向min-width元素添加overflow: visible，以便正确处理min-width，而不是将其视为宽度的默认（错误）行为。

Answer 4

如果您不介意手动指定线条的宽度，可以这样做：

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

Answer 5

使用disply: flex;和flex-grow的另一个解决方案：

＆＃13;

.container {
    width: 200px;
}

.row {
    display: flex;
}

.underline {
    flex-grow: 1;
    border-bottom: 1px solid black;
    margin-left: 5px;
}

＆＃13;

<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>

＆＃13;

如何在CSS中加下空格？

5 个答案: