独书先生 Menu

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; }