无序列表ul li的常用css

使用无序列表：即UL

看一个最简单的例子：

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

这是一个未加修饰的纵向列表

1：设置列表的边界

#base {
border: 1px solid #000;
margin: 2em;
width: 10em;
padding: 5px;
}

html中这样写，就会呈现一个带边框的无序列表

<div id="base">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>

2：设定列表的图像

可以设定列表的样式为左边带一个图像，样式如下：

ul {
list-style-type: disc;
list-style-image: url(bullet.gif);
list-style-position: inside;
}

disc表示实心的圆，list-style-image表示列表用到的小图像，如果这个图像的url

不正确时，disc才会起作用，inside表示列表是在区块内部的。

3：如何在段落中使用列表

样式如下：

#inline-list {
border: 1px solid #000;
margin: 2em;
width: 80%;
padding: 5px;
font-family: Verdana, sans-serif;
}

#inline-list p {
display: inline;
}

#inline-list ul, #inline-list li {
display: inline;
margin: 0;
padding: 0;
color: #339;
font-weight: bold;
}

4：水平导航

#h-contain {
padding: 5px;
border: 1px solid #000;
margin-bottom: 25px;
}

#pipe ul {
margin-left: 0;
padding-left: 0;
display: inline;
}

#pipe ul li {
margin-left: 0;
padding: 3px 15px;
border-left: 1px solid #000;
list-style: none;
display: inline;
}


#pipe ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}

#h-contain定一个一个边界为1的区块，水平导航用的也是inline方式，li.first定义第一个

列表元素没有左边那个象素为1的border。

下面的样式是tab方式的水平导航：

#tabs ul {
margin-left: 0;
padding-left: 0;
display: inline;
}

#tabs ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;
display: inline;
}


#tabs ul li.here {
border-bottom: 1px solid #ffc;
list-style: none;
display: inline;
}

li的class如果为here，则是选中的

来源：网络