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