CSS按比例等分box，并显示分隔线_css 三个盒子平分 中间加竖线隔开

  <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; 时，此元素的内边距和边框不再会增加它的宽度。如果宽度不增加，我们当然不担心被撑破呀，于是我们赶紧为li增加  -webkit-box-sizing: border-box;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;}