<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>