el-menu加横向滚动条之后 el-menu-item的选中状态的颜色宽度不是自适应 被截取了一部分

当el-menu加横向滚动条之后，el-menu-item的选中状态的颜色宽度不是自适应，被截取了一部分，这个问题可以通过CSS样式进行修复。

你可以使用以下CSS代码：

.el-menu--horizontal-scroll .el-menu-item.is-active::after {
  width: 100%;
}

这个CSS选择器会选中el-menu中的is-active状态的el-menu-item元素，然后将其选中状态的颜色宽度设置为100%。这样就可以让选中状态的颜色宽度自适应，不会被截取了。

需要注意的是，这个样式只适用于el-menu中带有横向滚动条的情况。如果你的el-menu没有横向滚动条，那么这个样式会导致选中状态的颜色宽度过大。

希望这个解决方案能够帮助到你。

相关问题

el-menu加横向滚动条之后 el-menu-item的选中状态宽度不是自适应

在el-menu加横向滚动条之后，el-menu-item的选中状态宽度不自适应的问题，可以通过CSS样式进行修复。

你可以使用以下CSS代码：

.el-menu--horizontal-scroll .el-menu-item.is-active {
  flex: 0 0 auto;
  width: auto !important;
}

这个CSS选择器会选中el-menu中的is-active状态的el-menu-item元素，并且将其宽度设置为自适应。同时，由于加了横向滚动条，我们还需要将其flex属性设置为0，这样就可以让它自适应宽度了。

在代码中，我们使用了!important关键字，这是因为在原本的样式中，可能有一些样式会覆盖我们的修改。使用!important可以强制将这个样式应用到元素上，避免被其他样式覆盖。

希望这个解决方案能够帮助到你。

el-aside 给了固定宽度 在el-aside下写了有横向滚动条的el-menu el-menu-item选中颜色被截取了 如何解决

这个问题可能是由于 el-aside 的固定宽度导致 el-menu 的宽度超出了 el-aside 的宽度，从而导致 el-menu-item 选中颜色被截取。

解决方法可以尝试以下两种：

1. 调整 el-aside 的宽度，让它能够容纳 el-menu 的宽度。可以通过调整 el-aside 的样式或者使用响应式布局来实现。

2. 为 el-menu 添加一个容器，并为该容器设置横向滚动条。具体实现可以参考以下代码：

<div style="overflow-x: auto;">
  <el-menu>
    <el-menu-item>选项1</el-menu-item>
    <el-menu-item>选项2</el-menu-item>
    <el-menu-item>选项3</el-menu-item>
    <el-menu-item>选项4</el-menu-item>
    <el-menu-item>选项5</el-menu-item>
    <el-menu-item>选项6</el-menu-item>
    <el-menu-item>选项7</el-menu-item>
    <el-menu-item>选项8</el-menu-item>
    <el-menu-item>选项9</el-menu-item>
    <el-menu-item>选项10</el-menu-item>
  </el-menu>
</div>

这样，el-menu 就能够在容器内滚动，而不会超出 el-aside 的范围，从而解决选中颜色被截取的问题。