css布局width设置百分比宽度使用border超出问题

float左右div，各占屏幕一半宽度，都使用width:50%;
但是给左边div加了border-right:1px solid red; 屏幕宽度不够了，把右边div挤到下面了，怎么解决？


解决方法:

你可以给div加另外一个属性
box-sizing:border-box;
这个就把边框的宽度算在总宽度里面了。


例 li { width:50%; float:left; text-align:center; height:260px;  position:relative;  text-align: center; border-right:2px #f5f5f5 solid; border-bottom:2px #f5f5f5 solid; box-sizing:border-box;}