一、需求:
目前来说,有些用户的浏览器可能是100%,有些用户的在系统设置了**125%**的官方推荐,所以导致有些样式不一样
我这里就是想要的效果是:
当我浏览器100%或者125% 的时候,label的内容不会被输入框覆盖,自适应是最好的。
<div class="table-page-search-wrapper" style="margin-top: 10px"><a-form layout="inline" @keyup.enter.native="searchQuery"><a-row :gutter="24"><a-col :span="4"><a-form-item label="省份"><a-select v-model="queryParam.provinceCode" @change="handleProvinceChange" placeholder="请选择省份"><a-select-option v-for="province in provinces" :key="province.value" :value="province.value">{{ province.label }}</a-select-option></a-select></a-form-item></a-col><a-col :span="7"><a-form-item label="项目名称"><a-input placeholder="请输入项目名称" v-model="queryParam.pojeName" :allowClear="true"></a-input></a-form-item></a-col><a-col :span="7"><a-form-item label="计划时间"><a-range-picker v-model="plan_date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="onchangeDateOfPlan" /></a-form-item></a-col><a-col :span="6"><a-form-item label="项目阶段"><a-select v-model="queryParam.tableType"><a-select-option v-for="item in tableTypeOptions" :key="item.value" :value="item.value">{{ item.label }}</a-select-option></a-select></a-form-item></a-col></a-row><a-row :gutter="24"><a-col :span="4"><a-form-item label="城市"><a-select v-model="queryParam.cityCode" @focus="onFocusCitySelect" placeholder="请选择城市"><a-select-option v-for="(item,index) in cities" :key="index" :value="item.value">{{ item.label }}</a-select-option></a-select></a-form-item></a-col><a-col :span="7"><a-form-item label="风险等级"><a-select v-model="queryParam.riskLevel"><a-select-option v-for="item in riskLevelOptions" :key="item.value" :value="item.value">{{ item.text }}</a-select-option></a-select></a-form-item></a-col><a-col :span="7"><a-form-item label="经营单位"><a-input placeholder="请输入经营单位" v-model="queryParam.chargeBusinessUnit" :allowClear="true"></a-input></a-form-item></a-col><a-col :span="6"><a-form-item label="项目类型"><a-select v-model="queryParam.projectKind"><a-select-option v-for="item in projectAccurateTypeDict" :key="item.id" :value="item.id">{{ item.title }}</a-select-option></a-select></a-form-item></a-col></a-row><a-row :gutter="24"><a-col :span="24" style="text-align: center;margin-top: 10px;"><div class="table-page-search-submitButtons"><a-button type="primary" @click="searchQuery" icon="search">查询</a-button><a-button @click="searchReset" icon="reload" style="margin-left: 8px;background-color: #DFDFDF;">重置</a-button></div></a-col></a-row></a-form></div>
CSS样式代码:
.table-page-search-wrapper {.ant-form-inline {.ant-form-item {display: flex;margin-bottom: 24px;margin-right: 0;.ant-form-item-control-wrapper {flex: 1 1;display: inline-block;vertical-align: middle;}> .ant-form-item-label {line-height: 32px;padding-right: 8px;width: auto;}.ant-form-item-control {height: 32px;line-height: 32px;}}}.table-page-search-submitButtons {display: block;margin-bottom: 24px;white-space: nowrap;}}