<el-card class="box-cards" shadow="hover"> <div>已发货</div> <div><el-button type="info" plain>变更状态</el-button></div> </el-card> 让已发货和变更状态按钮在左右两侧

您可以使用 Flex 布局将已发货和变更状态按钮分别放在左右两侧。可以尝试以下代码：

<el-card class="box-cards" shadow="hover">
  <div style="display: flex; justify-content: space-between;">
    <div>已发货</div>
    <div><el-button type="info" plain>变更状态</el-button></div>
  </div>
</el-card>

这里将 `<div>` 标签设置为 Flex 容器，使用 `justify-content: space-between` 属性将两个子元素分别放在左右两侧。

相关问题

怎么让 <div> <el-button class="card_zoomMap_button">-</el-button> <el-input class="card_zoomMap_input" :value="zoomValNew" :disabled="true"></el-input> <el-button class="card_zoomMap_button">+</el-button> </div>三者处于一行，并设置input的长度

要让三个元素处于一行，并设置 `<el-input>` 的长度，你可以使用 CSS Flexbox 布局来实现。

以下是一个示例：

HTML 代码：

<div class="container">
  <el-button class="card_zoomMap_button">-</el-button>
  <el-input class="card_zoomMap_input" :value="zoomValNew" :disabled="true"></el-input>
  <el-button class="card_zoomMap_button">+</el-button>
</div>

CSS 代码：

.container {
  display: flex;
  align-items: center;
}

.card_zoomMap_button {
  flex: 1;
}

.card_zoomMap_input {
  flex: 2;
  width: 200px; /* 设置输入框的长度 */
}

在上述示例中，我们创建了一个名为 `container` 的容器，使用 `display: flex` 将其设置为 Flexbox 布局。这样，容器内的子元素会自动排列在一行，并根据 `flex` 属性进行布局。

我们给左右两个按钮的类名 `card_zoomMap_button` 设置了 `flex: 1`，表示它们会按比例占据剩余空间的相同比例。

对于输入框，我们给它的类名 `card_zoomMap_input` 设置了 `flex: 2`，表示它会占据剩余空间的两倍。此外，我们使用 `width` 属性来设置输入框的具体长度为 200 像素。

通过这样设置，三个元素就会处于一行，并且输入框的长度也被指定为你所需的长度。你可以根据需要调整 `flex` 和 `width` 的值来适应你的布局要求。

<el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> </el-row>如何让这五个卡片大小统一展示在一条线上

你可以尝试在每个 `<el-col>` 元素中添加 `align="center"` 属性，同时在最外层的 `<el-row>` 元素中添加 `justify="center"` 属性，代码如下：

<el-row justify="center">
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
</el-row>

这样设置后，每个卡片的宽度会被限定在 `<el-col>` 元素的宽度内，同时 `<el-row>` 元素的 `justify` 属性可以让所有的元素在水平方向上居中对齐。