如何显示文本，虚线然后是跨越页面宽度的更多文本？

小编典典

如何显示文本，虚线然后是跨越页面宽度的更多文本？

css

我想在HTML页面的同一行上显示一些文本，然后是虚线，然后显示更多文本，例如

Name: .......................................................... (Engineer)

我希望“名称”相对于左边界左对齐，而“工程师”相对于右边界右对齐，然后浏览器能够用重复的点填充两者之间的间隙。

我尝试了几种不同的方法来使用CSS和HTML使其正常工作，但还不太正确。我不想指定每个组件的宽度（实际或百分比），以使该解决方案可以重复使用具有不同长度的单词，例如，相同的解决方案可以使用：

Factory Location: .................................... (Not invoice address)

希望这个问题有意义，感谢任何建议，谢谢。

阅读 378

2020-05-16

共1个答案

小编典典

我建议也许a ul是一种选择：

<ul>
    <li><span class="definition">Name:</span><span class="defined">Engineer</span></li>
    <li><span class="definition">Factory location:</span><span class="defined">not invoice address</span></li>
</ul>

CSS：

ul li {
    border-bottom: 2px dotted #ccc;
}

span.defined {
    float: right;
}

span.defined:before {
    content: "(";
}

span.defined:after {
    content: ")";
}

编辑以更正CSS。还有 HTML。哎呀。

编辑响应@ Leigh的（准确）的评论：

这不是OP所要求的吗？这只是一个带下划线的下划线（FF 3.5），而不是两个文本之间的点。

我对CSS进行了一些调整，以将spans 的虚线边框隐藏起来：

ul li {
    border-bottom: 2px dotted #ccc;
    line-height: 2em;
    text-align: right;
    clear: both;
    margin: 0.5em 0 0 0;
}

span.definition {
    float: left;
}

span.defined:before {
    content: "(";
}

span.defined:after {
    content: ")";
}

span {
    display: inline-block;
    border: 2px solid #fff;
    padding: 0;
    margin: 0 0 -2px 0;
}

诚然，这仅在Chrome 8和Firefox 3.6，Ubuntu 10.10中进行了测试。

2020-05-16