今天在vue中使用elementui的layout布局制作页面的时候,发现我明明只定义了一行row的col,但是有元素却溢出到了下面一行去了:
![](https://i-blog.csdnimg.cn/blog_migrate/4d8c7369c182853a2d2a33e1963370a5.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/90cee6d03751c4c3a711be4ab8cd468e.png)
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark">
<template>
<el-select v-model="value1" multiple placeholder="病人类型" style="margin-left: -600px; width: 200px;">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value2" multiple collapse-tags style="margin-left: 10px; width: 100px;" placeholder="性别">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<el-input v-model="input" multiple collapse-tags style="margin-left: 10px; width: 200px;" placeholder="请输入查询条件"></el-input>
<template>
<el-select v-model="value" placeholder="检查仪器" style="margin-left: 10px; width: 200px;">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="">
<el-date-picker type="dates" v-model="value4" style="margin-left: 10px; width: 200px;" placeholder="选择开始日期">
</el-date-picker>
</div>
<div class="">
<el-date-picker type="dates" v-model="value4" style="margin-left: 10px; width: 200px;" placeholder="选择结束日期">
</el-date-picker>
</div>
<el-button>重置</el-button>
<el-button type="primary">查询</el-button>
<el-button><i class="el-icon-delete-solid"></i></el-button>
<el-button><i class="el-icon-download"></i></el-button>
<el-button type="primary"><i class="el-icon-s-unfold"></i></el-button>
<el-button><i class="el-icon-menu"></i></el-button>
</template>
</div>
</el-col>
</el-row>
问题代码
可以看到代码第二行明明已经 span="24"沾满了一整行,怎么元素并不在一行呢?检查了一下原来是我把日期选择器分别用了两个div包裹了起来,把div去掉就好啦~
<div class="">
<el-date-picker type="dates" v-model="value4" style="margin-left: 10px; width: 200px;" placeholder="选择开始日期">
</el-date-picker>
</div>
<div class="">
<el-date-picker type="dates" v-model="value4" style="margin-left: 10px; width: 200px;" placeholder="选择结束日期">
</el-date-picker>
</div>
去掉前
<el-date-picker type="dates" v-model="value4" style="margin-left: 10px; width: 200px;" placeholder="选择开始日期">
</el-date-picker>
<el-date-picker type="dates" v-model="value4" style="margin-left: 10px; width: 200px;" placeholder="选择结束日期">
</el-date-picker>
去掉后
达成预期效果