怎么删除el-button间距

要删除 Element UI 中 `<el-button>` 组件之间的间距，你可以使用 CSS 来覆盖默认样式。以下是一种方法：

1. 首先，在你的 Vue 组件的 `<style>` 区域或者全局样式中，定义一个 CSS 类来设置按钮之间的间距。例如：

.button-group .el-button {
  margin-right: 0;
}

这个 CSS 类 `.button-group .el-button` 将删除按钮之间的右侧外边距，使它们紧密排列在一起。

2. 在你的 Vue 模板中，将这个 CSS 类应用到包含 `<el-button>` 组件的父元素上。例如：

<div class="button-group">
  <el-button>按钮1</el-button>
  <el-button>按钮2</el-button>
  <el-button>按钮3</el-button>
</div>

这个 `<div>` 元素应用了 `.button-group` 类，并包含了多个 `<el-button>` 组件。按钮之间的间距将被删除，使它们紧密排列在一起。

你可以根据需要在组件中使用这个方法来删除按钮之间的间距。请注意，你可以根据具体情况自定义按钮之间的间距或其他样式属性来满足你的设计需求。

相关问题

el-button-group间距

el-button-group 间距可以通过设置 CSS 样式来实现。可以在 el-button-group 的父元素上设置 margin 或 padding 来控制间距大小。例如：

.parent {
  margin: 10px;
}

这样就会在 el-button-group 的周围添加 10px 的间距。

<el-header>Header <div style="display: flex; align-items: center;"> <span style="display: flex; align-items: center; flex: 1;"> <el-button type="info" disabled>商品名称:</el-button> <el-input type="text" v-model="text" maxlength="30" show-word-limit></el-input> </span> <span style="display: flex; align-items: center; flex: 1;"> <el-button type="info" disabled>商品价格:</el-button> <el-input type="text" v-model="text"></el-input> </span> <span style="display: flex; align-items: center; flex: 1;"> <el-button type="success">成功按钮</el-button> </span> </div> </el-header>保留间距使代码更美观,三个span的元素位于同一行

可以在 `span` 元素外面包一层 `div` 元素，并设置 `div` 元素的样式为 `margin: 10px 0;`，即可保留上下间距，同时使代码更美观。

下面是修改后的代码：

<el-header>
  Header
  <div style="display: flex; align-items: center; margin: 10px 0;">
    <span style="display: flex; align-items: center; flex: 1;">
      <el-button type="info" disabled>商品名称:</el-button>
      <el-input type="text" v-model="text" maxlength="30" show-word-limit></el-input>
    </span>
    <span style="display: flex; align-items: center; flex: 1;">
      <el-button type="info" disabled>商品价格:</el-button>
      <el-input type="text" v-model="text"></el-input>
    </span>
    <span style="display: flex; align-items: center; flex: 1;">
      <el-button type="success">成功按钮</el-button>
    </span>
  </div>
</el-header>