Element-UI el-col组件span值超过24后如何强制单行显示并添加水平滚动条？-css教程-PHP中文网

Element-UI el-col组件span值超过24后如何强制单行显示并添加水平滚动条？

碧海醫心

发布： 2025-03-24 10:06:01

原创

744人浏览过

element-ui el-col组件span值超过24后如何强制单行显示并添加水平滚动条？

Element-UI的el-col组件在span属性值总和超过24时会自动换行。如果需要强制单行显示并添加水平滚动条，则需要放弃el-row和el-col组件的默认布局，改用Flexbox布局。

核心问题在于el-row组件的默认换行行为。为了解决这个问题，我们将包含el-col组件的容器设置为Flex布局，并禁用换行，从而实现强制单行显示。同时，使用overflow-x: auto属性添加水平滚动条，以便查看超出容器宽度的内容。

以下是一个修改后的代码示例：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

<template>
  <div style="display: flex; overflow-x: auto;">
    <div class="el-col-wrapper">
      <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">8</div></el-col>
    </div>
  </div>
</template>

<style scoped>
.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  height: 30px;
  display: flex;
  justify-content: center; /* 居中显示数字 */
  align-items: center; /* 居中显示数字 */
  padding: 0 10px; /* 添加内边距 */
}

.el-col-wrapper {
  display: flex;
}
</style>

登录后复制

在这个例子中，我们移除了el-row组件，并使用一个div作为容器，应用display: flex和overflow-x: auto样式。 el-col组件仍然用于设置列宽，但它们现在在一个Flex容器中水平排列，即使span值总和超过24也不会换行。添加了.grid-content样式，使内容居中显示，并添加了内边距，使内容更易于阅读。通过这种方法，可以有效地解决el-col组件span值超过24后强制单行显示并添加水平滚动条的问题。

以上就是Element-UI el-col组件span值超过24后如何强制单行显示并添加水平滚动条？的详细内容，更多请关注php中文网其它相关文章！