vue elementui 怎样可以让文本框和按钮在同一行紧挨或者靠边
时间: 2024-02-20 20:58:22 浏览: 172
你可以通过设置 CSS 样式来让文本框和按钮在同一行紧挨或者靠边。可以使用 flex 布局或者 float 属性来实现。以下是两种方法的示例代码:
使用 flex 布局:
```html
<template>
<div class="container">
<el-input class="input-box"></el-input>
<el-button class="button-box">Button</el-button>
</div>
</template>
<style>
.container {
display: flex;
align-items: center;
}
.input-box {
margin-right: 10px;
}
.button-box {
flex-shrink: 0;
}
</style>
```
使用 float 属性:
```html
<template>
<div>
<el-input class="input-box"></el-input>
<el-button class="button-box">Button</el-button>
</div>
</template>
<style>
.input-box {
float: left;
margin-right: 10px;
}
.button-box {
float: left;
}
</style>
```
以上代码中,我们把文本框和按钮都放在一个容器中,并使用 CSS 样式来控制它们的位置。你可以根据实际需求来调整 CSS 样式。
阅读全文