我正在尝试这样的事情:
|--------------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/
谢谢!
答案 0 :(得分:8)
如果您重新排序 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
向上移动几个像素,以使边框更接近文本的基线。
答案 1 :(得分:7)
为此你需要像这样改变html结构
HTML
<div class="container">
<span class="left">Title</span>
<span class="right">value</span>
<span class="center"> </span>
</div>
这是.center span
.center {
text-align: center;
border-bottom: 1px dotted blue;
display:block;
}
答案 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>