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

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

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

我希望“Name”在左边框左对齐,而“Engineer”在右边框右对齐,然后浏览器能够用重复点填充两者之间的间隙.

我已经尝试了几种不同的方法来使用CSS和HTML来实现这一点,但不能完全正确.我不想指定每个组件的宽度(实际或百分比),以便解决方案可以重复使用不同长度的单词,例如相同的解决方案适用于：

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

希望这个问题有道理,任何建议表示赞赏,谢谢.

我建议,或许,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: ")";
}

JS Fiddle demo.

编辑纠正CSS.和HTML.哎呀.

编辑回应@ Leigh(准确)评论：

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以隐藏跨度下的虚线边框：

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中进行了测试.

Updated JS Fiddle demo.