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

代码如下:
  
  • 我是菜单一
  • 我是菜单二
  • 我是菜单三
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;}

 


你可能感兴趣的:(html5,css3,web)