Three level OL list : ol : List Style HTML CSS TUTORIALS


HTML CSS TUTORIALS » List Style » ol »

 

Three level OL list


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.container{
  width:650px;
  position:relative;
  padding-left:80px;
}
ol{
  list-style-type: upper-roman;
  margin-left:16px;
  text-align:justify;
}
ol ol{
  list-style-type: upper-alpha;
}
ol ol ol{
  list-style-type: decimal;
}
.container li span{
  position:absolute;
  left:0px;
  top:auto;
  width:60px;
  text-align:right;
}

li {white-space:nowrap}
</style>
</head>
<body>
<div class="container">
        <ul>
        <li><span>1</span>&nbsp;</li>
    </ul>
    <ol>
      <li><span>12</span><strong>SELLER AUTHORIZATION.</strong>
        <ol>
          <li><span>123</span>this is a test. <br />
            <span>1234</span>this is a test. </li>
          <li><span>12345</span>this is a test. 
            <ol>
              <li><span>123456</span>this is a test. <br />
                <span>1234567</span>this is a test.<br />
                <span>12345678</span>this is a test. </li>
                    <li><span>123456789</span>this is a test. <br />
                      <span>12345678</span>this is a test. </li>
            </ol>
          </li>
        </ol>
      </li>
      <li><span>1234567</span><strong>this is a test. </strong>
        <ol>
          <li><span>123456</span>this is a test. <br />
            <span>12345</span>this is a test. </li>
          <li><span>1234</span>'s expense, to:
            <ol>
              <li><span>123</span>this is a test. <br />
                <span>12</span>this is a test. <br />
                <span>1</span>this is a test. </li>
              <li><span>12</span>this is a test. <br />
                <span>123</span>this is a test. </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
</div>
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo List Style
» ol