如何用<button>按钮设置两个在最底下一行的按钮
时间: 2024-09-15 22:05:11 浏览: 32
在HTML中,如果你想在同一行显示两个<button>按钮,并让它们紧贴页面底部,你可以使用CSS来控制元素布局。下面是一个示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.button-container {
display: flex;
justify-content: flex-end; /* 将按钮放在行尾 */
align-items: flex-end; /* 将按钮放在元素底部 */
height: 50px; /* 设置容器高度,这里假设为50像素 */
}
button {
margin-right: 10px; /* 控制按钮之间的间距 */
}
</style>
</head>
<body>
<div class="button-container">
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
</div>
</body>
</html>
```
在这个例子中,`.button-container` 类设置了弹性布局(flexbox),将按钮置于行尾和底部。通过调整`margin-right`属性,可以改变按钮间的距离。
阅读全文