近期帮朋友做一个他们公司的商品站点，用到了曾经学到的html+css技术，当然做站点少不了Javascript和jquery这些.....

      这个功能主要实现了导航条里面的条目是居中的。所以声明了ul,li的样式，始终找不到错误，怎么也不能让当中的元素居中，以下就是这段代码：

     

<html>
  <head>
    <style type="text/css">
      body{
        margin: 0;
        padding: 0;
      }

      .nav{
        width: 100%;
        height: 300px;
        text-align: center;
      }
      /* 去除掉ul本身有的样式。也以前在这里面加text-align:cneter; */
      .nav ul{margin:0px auto; padding:0px;}
      .nav ul li{list-style: none; float: left; margin: 0 20px 0 0; display: inline;}
    </style>
  </head>
  <body>
    <div class="nav">
      <ul>
        <li>etmatch</li>
        <li>iphone</li>
        <li>ipad</li>
        <li>data</li>
        <li>line</li>
      </ul>
    </div>
  </body>
</html>


     我们看到本来设想的是.nav中的样式中设置了居中体现（text-align:center），可是我们这里多了一个条件就是float：left ，这个我们最初想的应该是让li在同一行。事实上假设去掉display:inline后的效果和上段代码是一样的，可是我们的解决方式不是去掉display:inline，而是去掉float:left。  这也就是浮动给ul。li带来的一些不可规避的效果，所以我们不要滥用浮动，要懂得浮动的详细原理再下手。

      做这个站点的一个体会就是要在短期的时间里做成一个效果。像我这个仅仅学过div和css的，很多其它的我是用别人写好的JS包，没有自己去封装一些JS功能。所以假设说想更深入的学习网页制作或者企业级站点开发，还须要看一些书籍丰富自己的学识。