这是两个层,每个占了50%的宽。
假如我们想给它加上个黑色边框,那么效果是这样子的。
很明显,第二个层因为border的原因被挤到了下一层。
那么如何给满宽度的元素设置边框而被挤出呢?
可以给它加上box-sizing:border-box;
最终的效果
源代码如下:
<html>
<head>
<style>
*{margin:0px;padding:0px;}
ul li{width:50%;float:left;height:100px;list-style: none;text-align:center;
color:#fff;line-height:94px;box-sizing:border-box;border:3px solid #000;}
</style>
</head>
<body>
<ul>
<li style="background:#03A9F4;">层1</li>
<li style="background:#3F51B5;">层2</li>
</ul>
</body>
</html>
更多的参考:
1、http://kissit.blog.51cto.com/6588582/1140572
2、http://blog.sina.com.cn/s/blog_771875550101hv5f.html