html - 获取 span 元素填充 div 中的空间

Question

我想做这样的事情:

|--------------fixed width---------------| Title1 .......................... value1 Title2 ................... another value Another title ........ yet another value

Here is my html example code:

<div class="container">
  <span class="left">Title</span>
  <span class="center">&nbsp;</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/

谢谢!

Answer 1

如果您重新排序您的 HTML，您可以获得一个简单的解决方案:

<div class="container">
  <span class="left">Title</span>
  <span class="right">value</span>
  <span class="center">&nbsp;</span>
</div>

将两个 float 元素放在 .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;
}

当你 float 一个元素时，显示类型计算为 block ，所以不需要声明它。

此外，对于 .center，如果您添加 overflow: auto，您将限制该 block ，使其不会超出 float 元素的边缘。因此，您的底部边框不会在标题和值文本下划线。

最后，您可以添加 position: relative 并将 .center 向上移动几个像素以使边框更靠近文本的基线。

fiddle :http://jsfiddle.net/audetwebdesign/DPFYD/