ant-vue-ui 表单水平展示的

  <!-- 查询表单 -->
        <a-form :model="queryForm"  class="query-form-inline">
          <!-- 旗县 -->
          <a-form-item label="旗县:" class="form-item">
            <a-select
              v-model:value="queryForm.areaCode"
              placeholder="请选择旗县"
              style="width: 200px"
              @change="handleAreaChange"
            >
              <a-select-option
                v-for="item in areaList"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <!-- 苏木 -->
          <a-form-item label="苏木:" class="form-item">
            <a-select
              v-model:value="queryForm.sumuCode"
              placeholder="请选择苏木"
              style="width: 200px"
              :disabled="!queryForm.areaCode"
              @change="handleSumuChange"
            >
              <a-select-option
                v-for="item in sumuList"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <!-- 嘎查 -->
          <a-form-item label="嘎查:" class="form-item">
            <a-select
              v-model:value="queryForm.gachaCode"
              placeholder="请选择嘎查"
              style="width: 200px"
              :disabled="!queryForm.sumuCode"
            >
              <a-select-option
                v-for="item in gachaList"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <!-- 查询 + 重置按钮 -->
          <a-form-item class="form-item btn-item">
            <a-button type="primary" @click="handleQuery">查询</a-button>
            <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
          </a-form-item>
        </a-form>

/* 查询表单整体样式 */
.query-form-inline {
  display: flex;
  gap: 16px; /* 表单项之间的间距 */
  align-items: center;
  flex-wrap: wrap;  
  margin-bottom: 0 !important;
}

/* 单个表单项：核心对齐样式 */
.form-item {
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-bottom: 0 !important; /* 清除antd默认的margin-bottom */
}

/* Label样式：固定宽度 + 右对齐 + 垂直居中 */
:deep(.ant-form-item-label) {
  width: 60px !important;
  text-align: right;
  padding-right: 8px;
  white-space: nowrap;
  margin-bottom: 0 !important; /* 清除默认margin */
  line-height: 32px !important; /* 和下拉框高度一致，精准居中 */
}

/* 下拉框/按钮容器：清除默认padding，避免对齐偏差 */
:deep(.ant-form-item-control) {
  margin-bottom: 0 !important;
  line-height: 32px !important;
  padding: 0 !important;
}

/* 按钮项：调整位置，避免和下拉框对齐偏差 */
.btn-item {
  margin-left: 20px !important; /* 按钮和最后一个下拉框的间距 */
}