
el-col列超出24份额时仍保持单行展示
如何让element-ui中的el-col列中的元素超过24份额时仍保持单行展示?这通常是出于实现横向滚动的布局需求。
根据提供的代码,可以看出问题在于使用el-col时,其span属性设置了具体的份额值。超过24份额后,元素会自动换行。
要实现超出24份额后仍然保持单行展示,需要采用以下步骤:
- 舍弃el-col:不再使用el-col来布局元素。
- 自定义容器:使用el-row创建容器,并使用Flex布局来控制元素排列。
- 使用flex-wrap:将容器的flex-wrap设置为nowrap,表示元素不会换行。
- 溢出滚动:为容器设置overflow-x: scroll属性,允许水平滚动。
修改后的代码如下:
需要注意的是,这种实现方式依赖于Flex布局,在某些旧浏览器中可能无法正常工作。










