下拉框与input输入框大小不一致问题

最新推荐文章于 2025-05-23 16:46:36 发布

guohongyanghy

最新推荐文章于 2025-05-23 16:46:36 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 vue Element

本文链接：https://blog.youkuaiyun.com/weixin_41562512/article/details/86010442

vue 同时被 3 个专栏收录

18 篇文章

订阅专栏

前端

17 篇文章

订阅专栏

Element

10 篇文章

订阅专栏

本文介绍如何使用CSS属性margin-bottom和width调整Element UI表单元素间距与尺寸，实现更紧凑美观的表单布局，包括输入框与下拉列表的样式优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

margin-bottom: -10px使控件之间的距离变小，可以为负数值

当下拉列表 style="width:92%"时，可以与input输入框大小一致

<el-form-item style="margin-bottom: -10px; " prop="string" label="输入框:" :label-width="formLabelWidth"  >
    <el-input size='mini' unselectable="on" placeholder="不可编辑" v-model="form.deviceModel" autocomplete="off" :disabled="disableFlag" style="" prop="string" readonly></el-input>
    </el-form-item>
<el-form-item style="margin-bottom: -10px;" label="下拉列表:" :label-width="formLabelWidth"  prop="string">
    <el-select clearable size="mini" v-model="form.locationKey" placeholder="请选择活动区域" autocomplete="off"  v-on:input="queryCabinetByCondition"  style="width:92%">
        <el-option v-for="item in LocationListForOpt" :key="item.locationKey" :label="item.locationName" :value="item.locationKey"></el-option>
     </el-select>
</el-form-item>