怎么让 <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` 的值来适应你的布局要求。