如何使每一对span标签 input标签在同一行显示

为了使每一对 `<span>` 和 `<input>` 标签在同一行显示，可以使用 CSS 来控制它们的布局。具体来说，可以通过设置 `display` 属性为 `inline-block` 并调整一些其他的样式属性来实现这一点。

以下是一些具体的 CSS 样式建议：

1. **设置 `display: inline-block`**：这会使元素在一行内显示，并且可以设置宽度和高度。
2. **调整 `vertical-align`**：确保垂直对齐方式一致。
3. **设置适当的 `margin` 和 `padding`**：以确保元素之间的间距合适。

以下是示例 CSS 代码：

.input-prefix {
    display: inline-block;
    vertical-align: middle;
    width: 100px; /* 调整为你希望的宽度 */
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #ffffff;
    text-align: right; /* 让前缀文本右对齐 */
}

.input-field {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 110px); /* 减去前缀的宽度和一定的间距 */
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-left: 10px; /* 增加左边距以分隔 span 和 input */
}

### HTML 结构

确保 HTML 结构如下：

<span class="input-prefix">ID: </span>
<input type="text" readonly v-model="item.Main_task_Nopri" class="input-field" />
<br />

<span class="input-prefix">检查区域: </span>
<input type="text" readonly v-model="item.AREA_NAME" class="input-field" />
<br />

<span class="input-prefix">检查标准: </span>
<input type="text" readonly v-model="item.CHECK_PER" class="input-field" />
<br />

通过以上 CSS 样式和 HTML 结构，每一对 `<span>` 和 `<input>` 标签将会在同一行显示，并且看起来整齐有序。