淘先锋技术网

首页 1 2 3 4 5 6 7

CSS中的宽度自动横向排列是指将一组元素按照自适应宽度进行排列,常用于轮播图、导航栏等场景。

实现方式是通过设置父容器的display属性为flex,子元素的宽度为百分比或flex-basis属性,再加上white-space: nowrap属性防止子元素换行。

.parent {
display: flex;
white-space: nowrap;
}
.child {
flex-basis: 20%; /* 或width: 20% */
}

以上代码将父容器的子元素按照20%的宽度进行排列,并设置子元素不换行。如果子元素数目超过一行,可以设置父容器的overflow-x属性为scroll,实现横向滚动。

.parent {
display: flex;
white-space: nowrap;
overflow-x: scroll;
}
.child {
flex-basis: 20%; /* 或width: 20% */
}

这样就可以实现自适应宽度横向排列了。需要注意的是,在使用flex布局时,子元素的宽度不再是兼容性较好的box-sizing: border-box,而是默认为box-sizing: content-box,如果需要设置box-sizing,需要在子元素上单独设置。

另外,如果子元素需要加上边框或padding,需要根据盒模型原理进行计算,不然会影响到布局。