第二个想法(http://jsfiddle.net/coma/wrwwn/2/)更好,因为点不会在列之间重叠。
HTML
<div class="dotted">
<div>
<div>
<span>item</span>
</div>
<div>
<span>price 1</span>
</div>
<div>
<span>price2</span>
</div>
</div>
<div>
<div>
<span>item2</span>
</div>
<div>
<span>price 1</span>
</div>
<div>
<span>price2</span>
</div>
</div>
</div>
CSS
div.dotted > div:after {
content: "";
display: block;
clear: both;
}
div.dotted > div > div {
position: relative;
float: left;
width: 33.333333%;
}
div.dotted > div > div:before {
content: "";
display: block;
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
border-top: 1px dotted #000;
z-index: -1;
}
div.dotted > div > div:last-child:before {
display: none;
}
div.dotted > div > div > span {
padding: 0 5px;
display: inline-block;
background-color: #fff;
}
http://jsfiddle.net/coma/wrwwn/
价格向右对齐
div.dotted > div {
position: relative;
}
div.dotted > div:before {
content: "";
display: block;
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
border-top: 1px dotted #000;
z-index: -1;
}
div.dotted > div:after {
content: "";
display: block;
clear: both;
}
div.dotted > div > div {
float: left;
width: 33.333333%;
}
div.dotted > div > div + div {
text-align: right;
}
div.dotted > div > div > span {
padding: 0 5px;
display: inline-block;
background-color: #fff;
}
http://jsfiddle.net/coma/wrwwn/2/
使用固定背景
div.dotted > div > div > span,
html {
background: #F4EAEC url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3949/3949452.png?1382901481) 0 0 fixed;
}
http://jsfiddle.net/coma/wrwwn/4/
复杂的
html {
background: #F4EAEC url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3949/3949452.png?1382901481) 0 0 fixed;
}
div.dotted div {
height: 2em;
}
div.dotted > div div {
float: left;
width: 50%;
position: relative;
overflow: hidden;
}
div.dotted span {
display: block;
position: absolute;
padding: 0 5px;
}
div.dotted span:after {
content: "";
display: block;
position: absolute;
top: 50%;
width: 1000px;
border-top: 1px dotted #000;
}
div.item span {
left: 0;
}
div.item span:after {
left: 100%;
}
div.prices span {
right: 0;
}
div.prices span:after {
right: 100%;
}
http://jsfiddle.net/coma/wrwwn/6/