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

时间:2013-06-12 11:50:00

标签: html css

我正在尝试这样的事情:

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

谢谢!

3 个答案:

答案 0 :(得分:8)

如果您重新排序 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/

答案 1 :(得分:7)

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

HTML

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

这是.center span

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

jsFiddle File

答案 2 :(得分:0)

同时,Flexbox具有完整的浏览器支持,从而无需中心元素即可提供更优雅的解决方案。

.left, .right {
    border: 1px dotted red;      
}

.container {
    display: flex;
    justify-content: space-between;
    width: 200px;
    border: 1px dotted red;
    padding: 5px;
}
<div class="container">
  <span class="left">Title</span>   
  <span class="right">value</span>
</div>