对我来说很难解释我在一个问题上想要实现什么.我实际上是在一个小提琴中建造的,但是我知道他们要做一个更聪明的方法：
http://jsfiddle.net/4QgtM/1/
我想要实现的
Car ............................... $2000 Boat ............................. $20000 Airplane ........................ $200000
我有(Hack)
<ul> <li><a href="javascript:void(0)">Car</a><i></i><span>$2000</span></li> <li><a href="javascript:void(0)">Boat</a><i></i><span>$20000</span></li> <li><a href="javascript:void(0)">Airplane</a><i></i><span>$200000</span></li>
有没有人有一个聪明的方式来实现这一点？谢谢！
解决方法
检查出来(灵感来自
this)
CSS：
ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none
}
ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "
}
ul.leaders span:first-child {
padding-right: 0.33em;
background: white
}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white
}
HTML：
<ul class=leaders>
<li><span><a href="javascript:void(0)">Car</a></span>
<span>$200</span>
<li><span><a href="javascript:void(0)">Boat</a></span>
<span>$2000</span>
<li><span><a href="javascript:void(0)">Airplane</a></span>
<span>$20000</span>
<li><span><a href="javascript:void(0)">Hover craft</a></span>
<span>$200000</span>
<li><span><a href="javascript:void(0)">Supersonic futuristic machine</a></span>
<span>$2000000</span>
</ul>
“只是为了纪录”： – 另一个解决方案是在img / png中有一个小点作为背景. (background：#FFF url(image.pn)repeat-x; – 另外还有一个解决方案是边框底部：点缀;
