<ul>
        <li>我是選單一</li>
        <li>我是選單二</li>
        <li>我是選單三</li>
    </ul>
Css Code:
   ul {
       overflow:hidden;
       width:640px;
       margin:0 auto;
       border:1px solid #ccc;
       text-align:center;
             }
         ul li {
        list-style:none;
        float:left;
         width:33.33%;
         padding:10px 0;

          }
 

實現的效果為

OK,That's so easy!,這樣我就可以三等分了，可是各位看官，如果你細心的情況下，你會發現，現在導航都會加些分隔，有同學這樣說了，既然等分都沒有一點問題，加分隔就加一個右邊框不就可以了嗎？OK，你說的沒有錯，這樣想就成功了50%，我們就按他所說的，來演示一下效果：

啊，大事不好了，怎麼第三項都被撐破了，自動換行了，我們完美的導航出現了問題，這樣的效果我相信，沒有人會覺得這是正常的，原來我們在加border-right:1px solid #ccc;時，會自動為li增加1px,最後我們的總寬度為33.33*3+3>100，總寬度早已經不是100了，他們一起把ul撐破了，出現這樣的情況與以前的html制定的標準有關，現在html 5橫空出世，媽媽再不擔心我找不到家了。html 5引入了新的屬性 box-sizing，當你設定一個元素為box-sizing: border-box;

看到了，我們的子元素再也不出軌了，因為我們用box-size並沒有為其增加寬度，我相信這個Demo各位小夥伴會常用到的。
給一個最終的CSS

 ul {

       overflow:hidden;

       width:640px;

       margin:0 auto;

       border:1px solid #ccc;

       text-align:center;

             }

    ul li {

    list-style:none;

    float:left;

    width:33.33%;

    padding:10px 0;

    border-right:1px solid #ccc;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    ul li:last-child {border-right:0;}