获取span元素填充div中的空格

I'm trying to have something like this:

我想尝试这样的事情：

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

Here is my html example code:

这是我的html示例代码：

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

And here my css:

在这里我的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;
}

It's possible to make span "center" expand to fill the space between the other two span elements?

可以使跨度“中心”扩展以填充其他两个跨度元素之间的空间吗？

Code on jsfiddle: http://jsfiddle.net/XqHPh/

关于jsfiddle的代码：http：//jsfiddle.net/XqHPh/

Thank you!

谢谢！

2 个解决方案

#1

If you reorder your HTML, you can get a simple solution:

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

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

Place the two floated elements ahead of the .center element. The .center element will be in regular content flow and wrap around the left and right content.

将两个浮动元素放在.center元素之前。 .center元素将处于常规内容流中并包围左右内容。

The CSS:

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;
}

When you float an element, the display type computes to block, so no need to declare it.

浮动元素时，显示类型计算为阻塞，因此无需声明它。

Also, for .center, if you add overflow: auto, you constrain the block so it does not extend beyond the edges of the floated elements. As a result, your bottom border does not underline the title and value text.

另外，对于.center，如果添加overflow：auto，则约束块，使其不会超出浮动元素的边缘。因此，底部边框不会标题标题和值文本。

Finally, you can add position: relative and move the .center up a few pixels to align the border closer to the baseline of the text.

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

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

小提琴：http：//jsfiddle.net/audetwebdesign/DPFYD/

#2

for this you need to change the html structure like this

为此你需要像这样改变html结构

html

HTML

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

and here is the css for .center span

这里是.center span的css

.center {
    text-align: center;
    border-bottom: 1px dotted blue;
    display:block;
}

jsFiddle File

jsFiddle文件

#1