.el-button + .el-button这个样式怎么修改

### 修改相邻 `.el-button` 元素之间样式的方案

为了自定义 Element UI 中相邻 `.el-button` 的样式，可以通过 CSS 或者 SCSS 来实现更灵活的设计需求。以下是具体方法：

#### 使用纯CSS方式调整间距
如果仅需简单地增加或减少按钮间的距离，可以直接利用 `margin` 属性来操作。

.el-button + .el-button {
    margin-left: 10px;
}

这段代码表示当一个`.el-button`紧跟在另一个之后时，在它们之间加入指定宽度的左边距[^1]。

#### 利用SCSS增强定制能力
对于采用 BEM 命名法构建的项目来说，推荐使用预处理器如 SCSS 进行更加细致化的布局设计。这里展示了一个例子，它不仅改变了默认间隔还允许开发者根据实际情况进一步微调各个状态下的表现形式。

@include b(button-group) {
  @include e(item) {
    &:not(:last-child){
      margin-right: 8px !important; /* 调整右侧外边距 */
    }
    
    &[disabled],
    &.is-disabled{
      opacity:.65;
      cursor:not-allowed;
    }

    // 更多个性化配置...
  }
}

此段 SCSS 代码片段展示了如何创建一组具有特定间距的按钮集合，并且针对禁用状态下应用不同的视觉效果。

#### 结合HTML结构优化体验
有时单纯依靠样式可能无法达到理想的效果，这时就需要考虑 HTML 文档本身的结构调整。例如将多个关联紧密的操作按钮包裹在一个容器内，以便更好地管理其相对位置关系。

<div class="custom-btn-container">
  <el-button type="primary">保存</el-button>
  <el-button>取消</el-button>
</div>

<style scoped lang='scss'>
.custom-btn-container {
  display: flex;
  
  > * + * {
     margin-left: 1em;
  }
}
</style>

上述实例中通过 Flexbox 实现了水平排列的同时也确保了各元素间保持一致的距离[^2]。