我想尝试这样的事情：
|--------------fixed width---------------| Title1 .......................... value1 Title2 ................... another value Another title ........ yet another value
这是我的html示例代码：
<div class="container"> <span class="left">Title</span> <span class="center"> </span> <span class="right">value</span> </div>
在这里我的css：
.center {
text-align: center;
border-bottom: 1px dotted blue;
display: inline-block;
outerWidth: 100%;
}
.right {
display: block;
border: 1px dotted red;
float: right;
}
.left {
display: block;
text-align: right;
border: 1px dotted red;
margin-right: 0px;
float: left;
}
.container {
width: 200px;
border: 1px dotted red;
padding: 5px;
}
可以使跨度“中心”扩展以填充其他两个跨度元素之间的空间吗？
关于jsfiddle的代码：http://jsfiddle.net/XqHPh/
谢谢！
解决方法
如果您重新排序HTML,可以获得一个简单的解决方案：
<div class="container"> <span class="left">Title</span> <span class="right">value</span> <span class="center"> </span> </div>
将两个浮动元素放在.center元素之前. .center元素将处于常规内容流中并围绕左右内容.
CSS：
.center {
display: block;
border-bottom: 1px dotted blue;
overflow: auto;
position: relative;
top: -4px;
}
.right {
float: right;
margin-left: 10px;
}
.left {
float: left;
margin-right: 10px;
}
.container {
width: 200px;
border: 1px dotted red;
padding: 5px;
}
浮动元素时,显示类型计算为阻塞,因此无需声明它.
另外,对于.center,如果添加overflow：auto,则约束块,使其不会超出浮动元素的边缘.因此,底部边框不会标题标题和值文本.
最后,您可以添加position：relative并将.center向上移动几个像素,以使边框更接近文本的基线.
