CSS按比例等分box，并显示分隔线

代码如下:

  <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;}