CSS: li元素设置width百分比后加border出现最后一个li元素挤到下一行

问题：8个li元素，实现4个4个排列，设置每个li元素25%，加上border边框，第四个li元素被挤到下一行

 

解决：设置属性

 box-sizing: border-box;

可把border和padding包含在width里面，总共计算25%。

例：

.nav_one li{float:left;width:25%;height:100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;padding:10px;border:1px solid #E7E4DE; }