Add different background image for each LI

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style type="text/css" media="screen">
 #divID #recipe {
   list-style: none;
 }
 
 #divID #recipe li {
   padding: 10px 50px;
   margin-bottom: 6px;
   border-bottom: 1px solid #ccc;
 }
 
 #divID #one {
   background: url(img/ol_1.gif) no-repeat 6px 50%;
   }
 
 #divID #two {
   background: url(img/ol_2.gif) no-repeat 2px 50%;
   }
 
 #divID #three {
   background: url(img/ol_3.gif) no-repeat 3px 50%;
   }
 
 #divID #four {
   background: url(img/ol_4.gif) no-repeat 0px 50%;
   }
 
 #divID #five {
   background: url(img/ol_5.gif) no-repeat 6px 50%;
   }
 </style>

</head> <body>

this is a test.
this is a test.
this is a test.
this is a test.
this is a test.

</body> </html>

</source>

Add list background image

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Lists</title>
 <style type="text/css" media="screen">
 
 #fig1_1 ul {
   list-style: none;
   }    
 #fig1_1 li {
   background: url(bull.gif) no-repeat 0 50%;
   padding-left: 17px;
   }
 </style>

</head> <body>

Apples
Spaghetti
Green Beans
Milk

</body> </html>

</source>

Add style to an anchor in a LI tag

   <source lang="html4strict">

<title>Add style to an anchor in a

</title> <style type="text/css"> li a { text-decoration: none; } </style> </head> <body>

</body> </html>

</source>

Alignment of list items

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Alignment of list items</title>
 <style type="text/css">
   p {
     margin: 0.75em 0 0 1.5em; 
     padding: 0;
     width: 33em;
     border: 1px dotted black;
   }
   ul {
     list-style-type: square;
     list-style-position: outside;
     margin: 0.75em 0 0 0; 
     padding: 0 0 0 1.5em;
     width: 34.5em;
     border: 1px dashed black;
   }
   ul.indent {
     margin: 0.75em 0 0 1.5em; 
     width: 33em;
   }
   li {
     margin: 0.75em 0 0 0;
     border: 1px dotted black;
   }
 </style>

</head> <body>

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

L.
L.

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

L.
L.

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

</body> </html>

</source>

Alignment of list items with margin

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Alignment of list items</title>
 <style type="text/css">
   p {
     margin: 0.75em 0 0 1.5em; 
     padding: 0;
     width: 33em;
     border: 1px dotted black;
   }
   ul {
     list-style-type: square;
     list-style-position: outside;
     margin: 0.75em 0 0 0; 
     padding: 0 0 0 1.5em;
     width: 34.5em;
     border: 1px dashed black;
   }
   ul.indent {
     margin: 0.75em 0 0 1.5em; 
     width: 33em;
   }
   li {
     margin: 0.75em 0 0 0;
     border: 1px dotted black;
   }
 </style>

</head> <body>

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

L.
L.

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

Li.
Li.

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

</body> </html>

</source>

Define class for
to set its font weight to bold

   <source lang="html4strict">

<html> <head> <title>Define class for LI to set its font weight to bold</title> <style type="text/css">

 .warning {
  font-weight: bold;
 }

</style> </head> <body>

</body> </html>

</source>

Inline centred list

   <source lang="html4strict">

<!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> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ul,li{

 margin:0;
 padding:0;
 list-style:none;
 text-align:center;
 white-space:nowrap;

} li{

 display:inline;
 position:relative;
 white-space:nowrap;

} li a.last{border-right:1px solid #CFD3E2;} a {

 border-left:1px solid #CFD3E2;
 font-family: Arial;
 font-size: 11px;
 text-decoration: none;
 font-weight: bold;
 color: #4D9DDC;
 padding:4px 10px;
 line-height:21px;

}

html a {

   padding:2px 10px;
   display:inline-block;
   line-height:17px

}

html a {

   height:1%;

} a:hover{

   color: #FFAD2B;
   border-bottom:2px solid red;
   padding-bottom:2px;

}

html a:hover {

   padding-bottom:0px;

}

wrapper {

 background-color: #F3F4F5;
 border: solid 1px #BFCCD7;

} </style> </head> <body>

Inline centred list

<a href="#">Log in</a>
<a href="#">Register</a>
<a class="last" href="#">Help</a>

</body> </html>

</source>

li after

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li:after {

content: ", ";

} </style> </head> <body>

Database
Privacy
Best
Whatever
Make One

</body> </html>

</source>

LI background: url(search.gif) no-repeat;

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul {

margin-left: 40px;
padding-left: 0px;
list-style: none;

} li {

padding: .3em 0 1em 40px;
background: url(search.gif) no-repeat;

} </style> </head> <body>

V
S
T
P

</body> </html>

</source>

LI: before: "\00BB \0020"

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul {

list-style: none;
margin: 0;
padding: 0 0 0 1em;
text-indent: -1em;

} li {

width: 33%;
padding: 0;
margin: 0 0 0.25em 0;

} li:before {

content: "\00BB \0020";

} </style> </head> <body>

V
S
T
P

</body> </html>

</source>

LI border top: 1px solid black

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li {

border-top: 1px solid black;
padding: .3em 0;

} ul {

margin-left: 40px;
padding-left: 0px;
border-bottom: 1px solid black; 
list-style: none;
width: 36%;

} </style> </head> <body>

V
S
T
P

</body> </html>

</source>

li.className:after

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li.last:after {

content: ".";

} </style> </head> <body>

Database
Privacy
Best
Whatever
Make One

</body> </html>

</source>

LI font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul {

margin-left: 40px;
padding-left: 0px;
list-style: none;

} li {

padding: .3em 0 1em 40px;
font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;
background: url(search.gif) no-repeat;

} </style> </head> <body>

V
S
T
P

</body> </html>

</source>

LI margin:25em 0

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul {

list-style: none;
margin: 0;
padding: 0 0 0 1em;
text-indent: -1em;

} li {

width: 33%;
padding: 0;
margin: 0 0 0.25em 0;

} li:before {

content: "\00BB \0020";

} </style> </head> <body>

V
S
T
P

</body> </html>

</source>

LI padding: .3em 0

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li {

border-top: 1px solid black;
padding: .3em 0;

} ul {

margin-left: 40px;
padding-left: 0px;
border-bottom: 1px solid black; 
list-style: none;
width: 36%;

} </style> </head> <body>

V
S
T
P

</body> </html>

</source>

LI width: 33%

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul {

list-style: none;
margin: 0;
padding: 0 0 0 1em;
text-indent: -1em;

} li {

width: 33%;
padding: 0;
margin: 0 0 0.25em 0;

} li:before {

content: "\00BB \0020";

} </style> </head> <body>

V
S
T
P

</body> </html>

</source>

Nested LI tag

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Nested lists</title>

</head> <body>

Pizzas

B
- S.
- C.
- B:
  - M
  - M
  - S
- T.
- R.

</body> </html>

</source>

Right-aligned bullets

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Right-aligned bullets</title> <style type="text/css"> ul, li {

   padding:0;
   margin:0;

} ul li {

 list-style:none;
 background: url(bullet-reversed.gif) no-repeat right center;
 padding-right:20px;
 text-align:right;

} </style> </head> <body>

This is a list item
This is a list item
This is a list item
This is a list item
This is a list item
This is a list item

</body> </html>

</source>

Set display to inline to a LI under a UL in DIV

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

navsite ul li {

list-style: none;
margin: 0; 
display: inline;

} </style> </head> <body>

Site navigation:

<a href="">Home</a>
<a href="">About</a>
<a href="">Archives</a>
<a href="">Writing</a>
<a href="" id="current">Speaking</a>
<a href="">Contact</a>

</body> </html>

</source>

Shading border for list

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

 padding: 10px;
 margin-bottom: 15px;
 border: 2px solid black;

} LI {

 margin-top: 0px;
 margin-bottom: 10px;
 padding-right: 5px;
 background-color: gold;
 padding-top: 5px;
 padding-bottom: 5px;
 border-left: 1px solid gray;
 border-right: 2px solid black;
 border-top: 1px solid gray;
 border-bottom: 2px solid black;

} </style> </head> <body>

Normal List
Normal List

</body> </html>

</source>

Tab like list

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>

   <head>
       <title></title>
       <style type="text/css">
           ul {
               
               list-style: none;
               border-bottom: thin solid black;
               height: 21px;
           }
           li {
               text-align: center;
               float: left;
               margin: 0 10px;
               border: thin solid black;
               width: 100px;
           }
       </style>
   </head>
   <body>

<a href="http://www.google.ru">Google</a>
<a href="http://www.yahoo.ru">Yahoo</a>
<a href="http://www.ebay.ru">Ebay</a>
<a href="http://www.wrox.ru">Wrox</a>

   </body>

</html>

</source>

Three level list

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Creating better-looking lists</title>

   list-style-type: none;
   background: red;

} ul ul {

   background: yellow;
   border-left: 1px dotted #aaaaaa;
   padding: 10px;
   }

ul ul ul {

   background: none;
   border-left: 0;
   }

li {

   text-transform: uppercase;
   padding-left: 20px;
   font-weight: bold;
   color: #666666;

}

li li {

   text-transform: none;
   background: url(list-square.gif) 0 2px no-repeat;
   font-weight: normal;
   color: #333333;

} li li li {

   background: url(square.gif) 0 2px no-repeat;

} </style> </head> <body>

List - 1.1
- List - 2.1
- List - 2.2
  - List - 3.1
  - List - 3.2
  - List - 3.3
- List - 2.3

</body> </html>

</source>

Using padding to control the list item indent

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>
 <style type="text/css">
   ul {
     list-style-type: square;
     list-style-position: outside;
     width: 33em;
     padding: 0.5em;
     border: 1px solid black;
     margin: 0.75em 0 0 1.5em;
   }
   ul.one {
     padding-left: 0;
   }
   ul.two {
     padding-left: 1em;
   }
   ul.three {
     padding-left: 1.5em;
   }
   li {
     padding: 0;
     margin: 0;
     border: 1px dashed black;
   }
 </style>

</head> <body>

Li Europan lingues es membres del sam familie.

Li Europan lingues es membres del sam familie.

Li Europan lingues es membres del sam familie.

</body> </html>

</source>

HTML/CSS/List Style/LI

Содержание

Add different background image for each LI

Add list background image

Add style to an anchor in a LI tag

Alignment of list items

Alignment of list items with margin

Define class for
to set its font weight to bold

Inline centred list

Inline centred list

li after

LI background: url(search.gif) no-repeat;

LI: before: "\00BB \0020"

LI border top: 1px solid black

li.className:after

LI font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;

LI margin:25em 0

LI padding: .3em 0

LI width: 33%

Nested LI tag

Pizzas

B

Right-aligned bullets

Set display to inline to a LI under a UL in DIV

Site navigation:

Shading border for list

Tab like list

Three level list

Using padding to control the list item indent

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

HTML/CSS/List Style/LI

Содержание

Add different background image for each LI

Add list background image

Add style to an anchor in a LI tag

Alignment of list items

Alignment of list items with margin

Define class for to set its font weight to bold

Inline centred list

Inline centred list

li after

LI background: url(search.gif) no-repeat;

LI: before: "\00BB \0020"

LI border top: 1px solid black

li.className:after

LI font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;

LI margin:25em 0

LI padding: .3em 0

LI width: 33%

Nested LI tag

Pizzas

B

Right-aligned bullets

Set display to inline to a LI under a UL in DIV

Site navigation:

Shading border for list

Tab like list

Three level list

Using padding to control the list item indent

Навигация

Поиск

Define class for
to set its font weight to bold