带有项目符号的无序列表在第一个列表项之后

时间:2013-10-22 09:34:34

标签: css

http://i.imgur.com/tToezlN.png

我正在尝试实现上述效果,但我不确定最佳方法。可以使用无序列表然后更改样式,以便子弹只出现在内部吗?

如果不是,那么最好的方法是使用伪在每个列表项中添加背景图像以阻止它们显示在第一个列表项之前吗?

由于

2 个答案:

答案 0 :(得分:3)

这是相对简单的,所以我怀疑你是否尝试过,但是因为它需要这么少的努力,所以你有解决方案:(好吧,也许解决方案是如此明显你错过了它; p)

http://jsfiddle.net/kVsce/

HTML

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

CSS

ul li:first-child { list-style: none; }

答案 1 :(得分:0)

试试这个......可以根据需要进行修改。

CSS

ul { background: #004A80; overflow:hidden;}
ul li { color: #3CBCFF; font-size: 18px; float: left; width: 65px; }
ul li span { color: #FFFFFF; font-size: 14px; font-weight: bold; }  
ul li:first-child { list-style: none; } 

HTML

<ul>
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
    <li><span>Item 4</span></li>                
</ul>