前端提高篇（四十四）CSS练习3：flex布局（导航栏，两列三列布局

}

li {

width: 150px;

display: inline-block;

font-size: 16px;

color: #fff;

height: 50px;

line-height: 50px;

text-align: center;

background:

linear-gradient(to right, #888 ,transparent 40%),

linear-gradient(to right, transparent 60%,#888);

}

效果：

其中，li设置成inline-block，并在ul上设置font-size为0，消除li之间的空隙；为了让四个li充满ul，计算了每个li的宽度

如果要在li上加border，需要重新计算li的宽度，或者用IE6混杂盒模型

还可以用float，li脱离文档流，让其横放，并清除浮动

修改li，注释掉display: inline-block;，并添加清除浮动的代码

li {

width: 150px;

/* display: inline-block; */

float: left;

font-size: 16px;

color: #fff;

height: 50px;

line-height: 50px;

text-align: center;

ba