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>此代码将所有flex-item元素强制在一行显示。width: 15% 设置每个元素的宽度（总和超过100%），overflow-x: auto 在父容器上启用水平滚动条。 您可以根据实际需求调整width和margin值。 white-space: nowrap; 确保内容不换行。 这种方法比使用inline-block更灵活和现代化。 记住根据实际内容调整flex-item的宽度，以确保内容可读性和布局美观。
以上就是Element-UI el-col组件span值超24后如何强制在一行显示并使用滚动条？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
999
收藏
