标签：style class blog code color width
等我们实现列表时，经常会遇到一种情况：需要为列表的每一项的前面添加一个列表项图像。
我们在查阅W3C时会发现，在CSS中已经为我们提供了实现方法——“list-style-type”，我们来看看它的实现方法。
方法一(“list-style-type”属性)：
1 ul { 2 list-style-type : square; 3 list-style-position: inside; 4 }
这样做的确能实现添加小方块，其中 的“inside”是为了保证小方块在列表项的内部，对于方块的大小和间距仍然需要额外控制，（注意在设置type后就不要把li的display设置成其他值了），更重要的原因是，css为我们提供的样式有限，不能满足我们丰富的要求。（如果想使用list-style-image添加自己的图片，我们仍然需要去单独控制image的位置，这样做要比单独的一个span或div要麻烦一些。）list-style-type带来的问题不止这些。它是一种不稳定的式样，在IE中对它的解析与chorm会有不同。一般地在chorm中会是一个漂亮小巧的小方点，而在IE中它是一个大方块。这是因为我们并未对它的大小有控制。因此我提倡以下两种方法。
方法二（行内的span）：
1 .listImgDemoBox_1 ul { 2 list-style: none; 3 } 4 5 .listImgDemoBox_1 ul li { 6 height: 20px; 7 font-size: 16px; 8 line-height: 20px; 9 10 } 11 12 .listImgDemoBox_1 ul li span { 13 display: inline-block; 14 width: 3px; 15 height: 3px; 16 background-color: #000000; 17 vertical-align: middle; 18 }
即,每一个列表项内都放入行内元素。最前面放入一个span来填充颜色或图像。
方法三（浮动的span）：
.listImgDemoBox_1 ul { list-style: none; } .listImgDemoBox_1 ul li { height: 20px; font-size: 16px; line-height: 20px; padding-left: 10px; } .listImgDemoBox_1 ul li span { display: block; float: left; width: 3px; height: 3px; margin-top: 9px; margin-right: 5px; background-color: #000000; vertical-align: middle; }
即li的padding-left留出空位，再将列表项的图片浮动过去。
方法二和方法三在IE和Chorm中的效果是一样的，并且位置也比较好控制。
标签：style class blog code color width
原文地址：http://www.cnblogs.com/webARM/p/3789304.html
