如何显示文本，虚线然后更多的文本跨越页面的宽度？ [英] How to display text, a dotted line then more text spanning the width of the page?

问题描述

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

I'd like to display some text then a dotted line then some more text on the same line on a HTML page e.g.

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

左边界左对齐，工程师对右边界右对齐，然后浏览器可以用重复点填充两者之间的间隙。

I want the "Name" to be left justified against the left border and "Engineer" to be right justified against the right border and then the browser to be able to fill the gap between the two with repeating dots.

我尝试了好几种不同的方法来使用CSS和HTML工作，但不能完全弄清楚。我不想指定每个组件的宽度（实际或百分比），以便该解决方案可重用于不同长度的字。相同的解决方案将适用于：

I've tried a good few different ways to get this to work using CSS and HTML but can't quite get it right. I don't want to have to specify the width (actual or percentage) of each component so that the solution is re-usable with words of different lengths e.g. the same solution would work with:

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

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

Hope this question makes sense, any advice appreciated, thanks.

推荐答案

我建议， ul 将是一个选项：

I'd suggest that, perhaps, a ul would be one option:

<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: ")";
}

JS Fiddle演示。

。 HTML。糟糕。

已编辑以回应@ Leigh的>

Edited in response to @Leigh's (accurate) comment:

这不是OP要求做什么？这只是给了一个虚线下划线（FF 3.5），而不是两个文本之间的点。

This isn't doing what the OP asked for? This just gives a dotted underline (FF 3.5), not dots between the two pieces of text.

我已经调整CSS一点，以隐藏 span s：

I've adjusted the CSS a little to hide the dotted border under the 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中测试。

Admittedly this is only tested in Chrome 8, and Firefox 3.6, Ubuntu 10.10.

更新JS Fiddle演示。

这篇关于如何显示文本，虚线然后更多的文本跨越页面的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！