ul li 对齐问题，请教web开发大牛.........


<html>
<body><h4>一个嵌套列表：</h4>
<div align="left">
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶1</li>
    <li>绿茶1</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</div>
</body>
</html>列表缩进，对齐都很正常。<html>
<body><h4>一个嵌套列表：</h4>
<div align="center">
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶1</li>
    <li>绿茶1</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</div>
</body>
</html>列表不对其了。请问能否有什么办法，让列表居中。但是缩进又正常呢？

解决方案 »

  1.   

    <div style="width:95%;margin:auto">
      

  2.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    body{}
    ul{ width:100px;margin:0 auto;}
    </style>
    </head>
    <body>
    <h4>一个嵌套列表：</h4>
    <div style="width:100%; min-width:1002px;">
    <div style=" width:1002px; margin:0 auto;">
    <ul>
      <li>咖啡</li>
      <li>茶
        <ul>
        <li>红茶1</li>
        <li>绿茶1</li>
        </ul>
      </li>
      <li>牛奶</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
      

  3.   

    <div style="text-align:left;margin-left:40%;">
      

  4.   

    果然可以。再请教个问题。如果让 ul, li 层级间，有边线。这样让列表看起来像树一样。
      

  5.   

    用 <hr/>来分隔，行不？
    如果需要其他效果，可以用juery或者dojo 库，可以伸缩变换。。