HTML/CSS/List Style/LI

Материал из Web эксперт
Перейти к: навигация, поиск

Add different background image for each LI

 
<!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" xml:lang="en" lang="en">
<head>
  <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>

<div id="divID">
  <ol id="recipe">
    <li id="one">this is a test. </li>
    <li id="two">this is a test. </li>
    <li id="three">this is a test. </li>
    <li id="four">this is a test. </li> 
    <li id="five">this is a test. </li>
  </ol>
</div>

</body>
</html>



Add list background image

 

<!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" lang="en" xml:lang="en">
<head>
  <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>
<div id="fig1_1">
  <ul>
    <li>Apples</li>
    <li>Spaghetti</li>
    <li>Green Beans</li>
    <li>Milk</li>
  </ul>
</div>

</body>
</html>



Add style to an anchor in a LI tag

 
<html>
<head>
<title>Add style to an anchor in a <LI></title>
<style type="text/css">
  li a {
   text-decoration: none;
  }
 
</style>
</head>
<body>
  <ul id="navigation">
    <li class="warning"><a href="http://www.wbex.ru">A</a></li>
    <li><a href="http://www.wbex.ru">B</a></li>
    <li><a href="http://www.wbex.ru">C</a></li>
  </ul>
</body>
</html>



Alignment of list items

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <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>
  <p>  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. </p>
  <ul>
    <li>L.</li>
    <li>L.</li>
  </ul>
  <p>  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. </p>
  <ul class="indent">
    <li>L.</li>
    <li>L.</li>
  </ul>
  <p>  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. </p>
</body>
</html>



Alignment of list items with margin

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <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>
  <p>  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. </p>
  <ul>
    <li>L.</li>
    <li>L.</li>
  </ul>
  <p>  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. </p>
  <ul class="indent">
    <li>Li.</li>
    <li>Li.</li>
  </ul>
  <p>  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. </p>
</body>
</html>



Define class for
  • to set its font weight to bold

    •  
<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>
  <ul id="navigation">
    <li class="warning"><a href="http://www.wbex.ru">A</a></li>
    <li><a href="http://www.wbex.ru">B</a></li>
    <li><a href="http://www.wbex.ru">C</a></li>
  </ul>
</body>
</html>



    Inline centred list

     
<!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>
<h1>Inline centred list</h1>
<div id="wrapper"> 
  <ul>
    <li><a href="#">Log in</a></li><li><a href="#">Register</a></li><li ><a class="last" href="#">Help</a></li>
  </ul>
</div>
</body>
</html>



    li after

     
<!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>
  <ul>
   <li>Database</li>
   <li>Privacy</li>
   <li>Best</li>
   <li>Whatever</li>
   <li class="last">Make One</li>
  </ul>
  
</body>
</html>



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

     
 
<!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>
  
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
</body>
</html>



    LI: before: "\00BB \0020"

     
<!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>
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
  
</body>
</html>



    LI border top: 1px solid black

     
<!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>
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
</body>
</html>



    li.className:after

     
<!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>
  <ul>
   <li>Database</li>
   <li>Privacy</li>
   <li>Best</li>
   <li>Whatever</li>
   <li class="last">Make One</li>
  </ul>
</body>
</html>



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

     
<!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>
  
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
</body>
</html>



    LI margin:25em 0

     
<!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>
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
  
</body>
</html>



    LI padding: .3em 0

     
<!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>
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
</body>
</html>



    LI width: 33%

     
<!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>
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
  
</body>
</html>



    Nested LI tag

     
<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Nested lists</title>
</head>
<body>
  <h2>Pizzas</h2>
  <ul>
    <li>
      <h3>B</h3>
      <ul>
        <li>S.</li>
        <li>C.</li>
        <li>B:
          <ul>
           <li>M</li>
           <li>M</li>
           <li>S</li>
          </ul>
        </li>
        <li>T.</li>
        <li>R.</li>
      </ul>
    </li>
  </ul>
</body>
</html>



    Right-aligned bullets

     
<!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>
<ul>
  <li>This is a list item</li>
  <li>This is a list item </li>
  <li>This is a list item</li>
  <li>This is a list item </li>
  <li>This is a list item</li>
  <li>This is a list item </li>
</ul>
</body>
</html>



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

     

<!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">
#navsite ul li {
 list-style: none;
 margin: 0; 
 display: inline; 
}
</style>
</head>
<body>
   <div id="navsite">
   <h5>Site navigation:</h5>
   <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li> 
    <li><a href="">Archives</a></li>
    <li><a href="">Writing</a></li>
    <li><a href="" id="current">Speaking</a></li> 
    <li><a href="">Contact</a></li>
   </ul>
  </div>
</body>
</html>



    Shading border for list

     
<!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=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
div {
  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>
<div> 
    <ul>
        <li>Normal List</li>
        <li>Normal List</li>
    </ul>
</body>
</html>



    Tab like list

     
<!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>
        <ul>
            <li><a href="http://www.google.ru">Google</a></li>
            <li><a href="http://www.yahoo.ru">Yahoo</a></li>
            <li><a href="http://www.ebay.ru">Ebay</a></li>
            <li><a href="http://www.wrox.ru">Wrox</a></li>
        </ul>
    </body>
</html>



    Three level list

     

<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Creating better-looking lists</title>
<style type="text/css" media="screen">
ul {
    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>
    <ul>
      <li>List - 1.1
        <ul>
          <li>List - 2.1</li>
          <li>List - 2.2
            <ul>
              <li>List - 3.1</li>
              <li>List - 3.2</li>
              <li>List - 3.3</li>
            </ul>
          </li>
          <li>List - 2.3</li>
        </ul>
      </li>
    </ul>
</body>
</html>



    Using padding to control the list item indent

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <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>
  <ul class="one">
    <li>Li Europan lingues es membres del sam familie.</li>
  </ul>
  <ul class="two">
    <li>Li Europan lingues es membres del sam familie.</li>
  </ul>
  <ul class="three">
    <li>Li Europan lingues es membres del sam familie.</li>
  </ul>
</body>
</html>
    Источник — «http://wbex.ru/index.php?title=HTML/CSS/List_Style/LI&oldid=5633»