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属性。
示例代码：
<template> <div style="overflow-x: auto;"> <div class="flex-container"> <div class="flex-item" v-for="i in 6" :key="i">Item {{ i }}</div> </div> </div></template><style scoped>.flex-container { display: flex; white-space: nowrap; /* 防止换行 */}.flex-item { width: 15%; /* 调整宽度，占父容器的百分比 */ height: 30px; background-color: #f0f0f0; margin: 0 2%; /* 添加间距 */ border-radius: 4px;}</style>
登录后复制
本文来自互联网或AI生成，不代表软件指南立场。本站不负任何法律责任。
