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;
background:
linear-gradient(to right, #888 ,transparent 40%),
linear-gradient(to right, transparent 60%,#888);
}
ul::after{
content:‘’;
display:block;
clear:both;
}
效果一致
用flex布局:
ul设置成flex容器;li设置flex-grow: 1;,
(改动就这两处,代码就不放了)
优点:
各li1:1比例缩放,充满ul;
即使设置了border也不会超出;
不用计算各li的宽度,解决了各li计算宽度可能会有小数除不尽的困扰;
即使li个数不定,可能4个可能5个,依然不会超出ul,flex-shrink默认为1;
实乃神器也
两列布局:左边一列固定,其他自适应
两个子div,第一个子div设定宽度,第二个不设宽度,但设置了felox-grow:1;
当两个子div不能充满父级时,2子由于设置了flex-grow,而1子的flex-grow为0,所以多余的宽度都给了2
一般两列布局会在父级设置一个最小宽度min-width,当浏览器的宽度小于这个值时,下方出现滚动条,页面从左到右滚动看全貌
.wrapper {
display: flex;
height: 100px;
min-width: 600px;
}
.left {
width: 200px;
background: royalblue;
}
.center {
flex-grow: 1;
background: rosybrown;
}
效果:
三列布局:左右固定,中间自适应
在两列的基础上,加第三个div,并设置它的宽度和背景颜色
.right {
width: 200px;
background: purple;
}