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

8月 11, 2017

分类:Web

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

解决：设置属性

`1`	`box-sizing: border-box;`

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

例：

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