Introduction of the methods of using UL and Li

One, clear indents and Bullets
1, clear the Item and indent: ul {list-style:none; padding-left:0px;}
2, clear indent     ul {margin:7;list-style-type:disc;}
3, clear indent     ul {margin-left:20px}
4, clear indent     ul {margin-left: -24px;}
Two, change the project character beautiful small icon
There are 3 implementation methods below:
1, simple method
Ul{list-style-image:url (/images/icon.gif);
This method differs in the display of different browsers, mainly in the vertical position of the picture. Some browsers make pictures and list item text in the middle of the position, and some will appear higher, in short, some inconsistencies.
2, complex method
ul {list-style:none;}
Li{background:url (/images/icon.gif) no-repeat 0px 50%; padding-left:17px;} The
resolves the problem of the above browser incompatibility. First, clear the default bullets, and then add our own background picture. No-repeat told the browser not to tile this picture, 0px 50% tells the background image should be located in the left 0px and the vertical direction at the top down 50%, in fact, is in the vertical direction of the center. We added a 17px margin to the left so that those small icons with a 15px width of 5 pixels would be fully exposed and would not be obscured by text, and there would be a little space between the text.
3, general method
Li {background:url (/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}
Three, replace the project character is small square
ul {list-style-type:square;}
List-style-type can have the following values:
Value: Disc | circle | square | decimal-leading-zero | lower-roman | upper-roman | Lower-greek | LowEr-latin | Upper-latin | Armenian | Georgian | Lower-alpha | Upper-alpha | none | Inherit
Disc: Point
Circle: Circle
Square: Square
Decimal: Number
Decimal-leading-zero: number with a 0 beginning e.g., 01, 02, 03, ..., V.
Lower-roman: Lowercase roman Writings I, II, III, IV, V, etc.
Upper-roman: Uppercase Roman Letters I, II, III, IV, V, etc.
Lower-greek: lowercase Arabic text α,β,γ, ...
Lower-latin: Lowercase Latin A, B, C, ... z
Upper-latin: uppercase Latin A, B, C, ... Z
Armenian: Armenian number
Georgian: Georgia Digit An, ban, gan, ..., he, Tan, in, In-an, ...
Lower-alpha: Lowercase Latin A, B, C, ... z
Upper-alpha: uppercase Latin A, B, C, ... Z
None: None (Cancel all list styles)
Inherit: Inherit
Four, row and column
1, default to Portrait landscape, without setting.
2, horizontal arrangement, left alignment to <li> set: Li{float:left;}
2, multiline multiple columns: First, set <li> left alignment: Li{float:left; The second is to determine the width of <ul> and the width of <li>; one <li> is a column, and the first row of <li> number equals the width of the <ul>.
Five <li> <ul> browser compatible
compatible browsers    add in CSS:
list-style-position:outside

VI, <li> <ul> list Application Instance
1, with no sequence table (<li>) can also replace the table (<table>) to make a horizontal navigation list
HTML code
<ul id= " Minitabs ""
<li><a href= "/" > website </a></li>
<li><a href= "http:// blog.liugongwei.cn/admin.php# "> My blog </a></li>
<li><a href="/star.php "> Essence article </a ></li>
<li><a href= "/links.php" > Links </a></li>
</ul>
CSS Code
# 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-decoration:none;
Color: #9c9;
}
#minitabs a.active, #minitabs a:hover {
border-bottom:4px solid #696;
Color: #363;
}
#minitabs a:hover {
color: #696;
}
What we actually do here is goDropped bullets and default indentation. Display:inline the list into a horizontal direction. We also let all a elements of the list float:left; is to force them to equal one line horizontally. We added some colors to make the link text appear in bold and remove the default underline from the link.
2, row and column 100 row 10 rows 10 columns
<! 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= "HTML; charset=gb2312 "/>
<title>1 to 100 with Css+ul+li arranged in 10 rows 10 columns </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" >
var i;
for (i=1;i<=100;i++) {
document.write ("<li>" + i + "</li>");
}
</script>
</ul>
</div>
</body>
</html>
in the middle of the section JS instead. Pure CSS with the following code to replace <script type= "Text/javascript" > <ul>......</script> </ul> on it.
<ul>
<li>1</li>
<li>2</li>
...
<li>100</li>
</ul>
Main points:
1, determining <ul> width and <li> width; a <li> is a column, the first row horizontal The sum of <li> equals the width of <ul>.
2, left-aligned to <li>: Li{float:left