<el-header>Header <el-button type="success">成功按钮</el-button> <el-input type="text" v-model="text" maxlength="30" show-word-limit></el-input> <el-input type="text" v-model="text" maxlength="30" show-word-limit></el-input> </el-header>更改代码使三个元素位于一行
时间: 2023-10-07 22:09:09 浏览: 108
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
可以使用 Flex 布局来实现这个需求。将父元素 `el-header` 的 `display` 属性设置为 `flex`,并添加 `align-items: center;` 样式可以让子元素垂直居中对齐。同时,给每个子元素添加 `flex: 1;` 样式可以让它们平分父元素的宽度,从而实现三个元素位于一行的效果。
下面是修改后的代码:
```html
<el-header style="display: flex; align-items: center;">
<el-button type="success" style="flex: 1;">成功按钮</el-button>
<el-input type="text" v-model="text" maxlength="30" show-word-limit style="flex: 1;"></el-input>
<el-input type="text" v-model="text" maxlength="30" show-word-limit style="flex: 1;"></el-input>
</el-header>
```
阅读全文