如何风格在css:产品...(价格)? [英] how to style in css: product...(price)?
本文介绍了如何风格在css:产品...(价格)?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我很难解释我想在一个问题中实现。我实际上是在一个小提琴,但我知道他们的是一个更聪明的方式这样做: http://jsfiddle.net / 4QgtM / 1 /
Hard for me to explain what I'm trying to achieve in a question. I've actually built it in a fiddle, but I know theirs got to be a smarter way of doing this: http://jsfiddle.net/4QgtM/1/
我要达成的目标
p>
What I'm trying to achieve
Car ............................... $2000
Boat ............................. $20000
Airplane ........................ $200000
<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 )
Check this out... (inspired by this)
Fiddle
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;
- 另一个解决方案是让 bottom:dotted;
这篇关于如何风格在css:产品...(价格)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文