Element-UI的el-row和el-col组件基于24列栅格系统，当span值总和超过24时，会自动换行。 要实现span值总和超过24后仍然在一行显示并使用滚动条的效果，需要放弃el-row和el-col的栅格布局，改用CSS的Flexbox或Inline-block布局。
问题核心在于Element-UI的限制。直接修改el-col属性无法达到目标。
解决方案：使用Flexbox布局，并设置父容器的overflow-x: auto属性。
Weights.gg
多功能的AI在线创作与交流平台
3352 查看详情
示例代码：
.flex-container { display: flex; white-space: nowrap; /* 防止换行 */}.flex-item { width: 15%; /* 调整宽度，占父容器的百分比 */ height: 30px; background-color: #f0f0f0; margin: 0 2%; /* 添加间距 */ border-radius: 4px;}Item {{ i }}
此代码将所有flex-item元素强制在一行显示。width: 15% 设置每个元素的宽度（总和超过100%），overflow-x: auto 在父容器上启用水平滚动条。 您可以根据实际需求调整width和margin值。 white-space: nowrap; 确保内容不换行。 这种方法比使用inline-block更灵活和现代化。 记住根据实际内容调整flex-item的宽度，以确保内容可读性和布局美观。
以上就是Element-UI el-col组件span值超24后如何强制在一行显示并使用滚动条？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1120256.html
微信扫一扫 
支付宝扫一扫 
