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

Question

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

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

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

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

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

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

Answer 1

没有图像的简单解决方案

DEMO

输出:

此解决方案浮动两个文本,虚线底部边框扩展到剩余宽度.这是相关代码:

HTML:

<div class="left">Name:</div>
<div class="right">Engineer</div>
<div class="dotted"></div>
<div class="left">Factory location:</div>
<div class="right">not invoice address</div>
<div class="dotted"></div>

CSS:

div{
    height:1em;
}
.left,.right{
    padding:1px 0.5em;
    background:#fff;
    float:right;
}
.left{
    float:left;
    clear:both;
}
.dotted{
    border-bottom: 1px dotted grey;
    margin-bottom:2px;
}

Answer 2

在现代浏览器中,这可以通过使用柔性盒显示器来实现.Flex-box具有flex-grow属性,该属性指定当元素的总大小小于容器大小时,如何在元素之间分配自由空间.解释的来源是cimmanon的答案.

通过flex-grow仅指定一个产生点的元素将意味着整个剩余空间默认会被它用尽.

中间的点可以使用(a)径向梯度或(b)边界产生.我更喜欢径向渐变,因为它们允许在每个点与其尺寸之间的空间方面进行更大的控制.径向渐变具有较低的浏览器支持,但这不应该是一个大问题,因为它等于对Flexbox的支持(如果不是更好).

.container {
  width: 500px;
  height: 200px;
  background: -webkit-linear-gradient(0deg, brown, chocolate);
  background: -moz-linear-gradient(0deg, brown, chocolate);
  background: linear-gradient(0deg, brown, chocolate);
  color: beige;
  padding: 10px;
}
.row {
  line-height: 2em;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.row .left {
  -webkit-order: 1;
  -moz-order: 1;
  -ms-order: 1;
  order: 1;
}
.row .right {
  -webkit-order: 3;
  -moz-order: 3;
  -ms-order: 3;
  order: 3;
}
.row .right:before {
  content: "(";
}
.row .right:after {
  content: ")";
}
.row:after {
  content: "";
  margin: 0px 4px;
  background: -webkit-radial-gradient(50% 50%, circle, beige 12%, transparent 15%);
  background: -moz-radial-gradient(50% 50%, circle, beige 12%, transparent 15%);
  background: radial-gradient(circle at 50% 50%, beige 12%, transparent 15%);
  background-size: 1em 1em;
  background-position: 0 0.5em;
  background-repeat: repeat-x;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  -webkit-order: 2;
  -moz-order: 2;
  -ms-order: 2;
  order: 2;
}

<div class="container">
  <div class="row">
    <span class="left">Something</span>
    <span class="right">Something else</span>
  </div>
  <div class="row">
    <span class="left">Something lengthy</span>
    <span class="right">Something else lengthy</span> 
  </div>
</div>

浏览器特定的自定义:

• IE11不支持flex-grow伪元素的属性.因此,我们必须span在左右两个跨度之间引入额外的点.一个样品可以在这里找到.

• IE10对flexbox和其他属性有不同的语法.这是一个样本.

• Safari(Windows上的5.1.7及更早版本)不支持标签上的flexbox span,因此需要用div标签替换(或display: block需要设置).此外,早于6.1的Safari版本不支持flex-grow属性.此示例具有这些版本的实现.

最终产出:

将所有各种部分组合在一起,此示例适用于IE10,IE11,Chrome,Opera,Firefox和Safari(实质上,所有支持flexbox的版本).这种方法也适用于图像和渐变背景.

浏览器支持: Flexbox | 渐变

Answer 3

我建议,也许,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小提琴演示.

编辑纠正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中进行了测试.

更新了JS Fiddle演示.