获取span元素填充空间一个div

我想有这样的事情：获取span元素填充空间一个div

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

这里是我的HTML代码示例：

<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/

谢谢！

来源

2013-06-12 Mithenks

您想要为此创建和扩展范围吗？ – Nitesh

我想他可能想要一排点... –

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

<div class="container"> 
    <span class="left">Title</span> 
    <span class="right">value</span> 
    <span class="center">&nbsp;</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向上移动几个像素以使边框与文本的基线更接近。

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

来源

2013-06-12 12:12:28

+1良好完全解释的解决方案。 – Liam

完美！谢谢！ – Mithenks

为此，你需要更改HTML结构这样

HTML

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

，这里是为.center span

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

jsFiddle File

来源

2013-06-12 11:57:10

这很好。由于'.center'元素只是为了视觉效果，它在语义上并不重要，因此重定位是一个很好的调用。 –

'display：inline-block'怎么样？ – David

@David内嵌块会缩小以适应其内容，因此需要做更多工作才能填充左侧和右侧元素之间的空间。 –

获取span元素填充空间一个div

回答

相关问题