两个button按钮并排
时间: 2023-06-17 16:05:32 浏览: 102
你可以使用CSS的flexbox布局来实现两个button按钮并排的效果。具体实现步骤如下:
1. 在HTML中添加两个button按钮,并将它们放在一个父容器中。
```html
<div class="button-container">
<button class="button">按钮1</button>
<button class="button">按钮2</button>
</div>
```
2. 在CSS中使用flexbox布局,将父容器设置为flex,并设置justify-content为space-between,这样两个按钮就会分别位于父容器的两侧。
```css
.button-container {
display: flex;
justify-content: space-between;
}
```
3. 对每个按钮进行样式设置,比如设置背景颜色、字体大小等。
```css
.button {
background-color: #007bff;
color: #fff;
font-size: 16px;
border: none;
border-radius: 4px;
padding: 8px 16px;
}
```
完整的示例代码如下:
```html
<div class="button-container">
<button class="button">按钮1</button>
<button class="button">按钮2</button>
</div>
<style>
.button-container {
display: flex;
justify-content: space-between;
}
.button {
background-color: #007bff;
color: #fff;
font-size: 16px;
border: none;
border-radius: 4px;
padding: 8px 16px;
}
</style>
```