一、清除縮進和專案符
1、清除專案符和縮進：ul {list-style: none; padding-left:0px;}
2、清除縮進 ul {margin:7;list-style-type:disc;}
3、清除縮進 ul {margin-left:20px}
4、清除縮進 ul {margin-left: -24px;}
二、更換專案符漂亮小圖示
下面有3種實現方法：
1、簡單方法
ul{list-style-image:url(/images/icon.gif);}
這種方法不同的瀏覽器的顯示效果會有一些差異，主要是在圖片的垂直位置上。 有些瀏覽器會使圖片和清單項文本的中部位置平齊，有的又會顯示得高一些，總之就是有些不一致。
2、複雜方法
ul {list-style:none;}
li{background: url(/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}
可以解決上面的瀏覽器不相容的問題。 首先，清除預設的專案符號，然後加上我們自己的背景圖片。 no-repeat告訴瀏覽器不要平鋪這張圖片，0px 50%告訴背景圖片應該位於距左側0px 且豎直方向位於頂部往下50%處，實際上就是在豎直方向居中。 我們在左側加上了17px的邊距，這樣那些15px寬5圖元高的小圖示就能完全顯露出來，不會被文本遮擋，並且和文本之間有一點間隔。
3、常規方法
li {background: url(/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}
三、更換專案符為小方塊
ul {list-style-type: square;}
list-style-type可以有以下取值：
取值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-Alpha | upper-Alpha | none | inherit
disc:點
circle: 圓圈
square: 正方形
decimal: 數位
decimal-leading-zero: 以一個0開頭的數位e.g., 01, 02, 03 , ..., 98, 99
lower-roman: 小寫羅馬文字i, ii, iii, iv, v, /etc.
upper-roman: 大寫羅馬文字I, II, III, IV, V, /etc.
lower -greek: 小寫阿拉伯文字α, β, γ, ...
lower-latin: 小寫拉丁文a, b, c, ... z
upper-latin: 大寫拉丁文A, B, C, ... Z
armenian: 亞美尼亞數位
georgian: 喬治亞數位an, ban, gan, ..., he, tan, in, in-an, ...
lower-Alpha: 小寫拉丁文a, b, c, ... z
upper-Alpha: 大寫拉丁文A, B, C, ... Z
none: 無(取消所有的list樣式)
inherit:繼承
四、行列排法
1、預設為縱向橫向，無須設定。
2、橫向排列，對<li>設定左對齊：li{float:left; }
2、多行多列排列：一是設定<li>左對齊：li{float:left; } ；二是確定<ul>的寬度和<li>的寬度；一個<li>是一列，第一排橫<li>個數之和等於<ul>的寬度。
五、<li>與<ul>瀏覽器相容
相容瀏覽器 在CSS中加：
list-style-position: outside;
六、<li>與<ul>清單應用實例
1、用無序清單（<li>）也可以代替表格（<table>）製作橫向的導航清單
html代碼
<ul id=" minitabs">
<li><a href="/" >網站</a></li>
<li><a href="HTTP:// blog.liugongwei.cn/admin.php#" >我的博客</a></li>
<li><a href="/star.php">精華文章</a ></li>
<li><a href="/links.php">友情連結</a></li>
</ul>
CSS代碼
# minitabs{
height:29px;
font-size:12px;
margin:0px;
padding:0px;
border-bottom:1px solid #696;
}
#minitabs li {
height:25px;
margin:0px;
padding:0px;
display:inline;
list-style-type:none;
}
#minitabs a {
float:left;
line-height:25px;
font-weight:bold;
margin:0px 10px 0px 10px;
text-dec oration:none;
color:#9c9;
}
#minitabs a.active, #minitabs a:hover {
border-bottom:4px solid #696;
color:#363;
}
#minitabs a:hover {
color:#696;
}
我們這裡實際做的是去掉了專案符號以及預設的縮進。 display:inline;把清單變成水準方向。 我們還讓清單中所有a元素 float:left; 實際上就是強制它們在水準方向對齊成一行。 我們還加上了一些顏色，讓連結文本以粗體顯示，並且去掉了連結預設的底線。
2、行列排法100排十行十列
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="HTTP://www.w3.org/1999/xhtml">
<head>
<meta HTTP-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>1到100 利用CSS+ul+li 排列成十行十列</title>
<style type="text/css">
#mainDiv{
width:490px;
padding:10px;
background-color:#ccc;
overflow:hidden;
}
ul{
list-style:none;
padding:0;
margin:0;
}
li{
width:48px;
float:left;
margin:-1px 0 0 -1px;
border:1px solid #333;
text-align:center;
}
</style>
</head>
<body>
<div id="mainDiv">
<ul>
<script type="text/javascript"& gt;
var i;
for(i=1;i<=100;i++){
document.write("<li>" + i + "</li>");
}
</script>
</ul>
</div>
</body>
</html>
中間用了段js代替。 純CSS用下面的代碼替換<script type="text/javascript"> <ul>......</script> </ul>就可以了。
<ul>
<li>1</li>
<li>2</li>
...
<li>100</li>
</ul>
主要要點：
1、確定<ul>的寬度和<li>的寬度；一個<li>是一列，第一排橫 <li>個數之和等於<ul>的寬度。
2、對<li>設定左對齊：li{float:left; }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
