如何 - 按钮组
了解如何创建 CSS "按钮组"。
水平按钮组
在一行中将一系列按钮组合成一个按钮组
如何创建按钮组
步骤 1) 添加 HTML
示例
<div class="btn-group">
<button>苹果</button>
<button>三星</button>
<button>索尼</button>
</div>
步骤 2) 添加 CSS
示例
.btn-group button {
background-color: #04AA6D; /* 绿色背景 */
border: 1px solid green; /* 绿色边框 */
color: white; /* 白色文本 */
padding: 10px 24px; /* 一些内边距 */
cursor: pointer; /* 指针/手形图标 */
float: left; /* 按钮并排浮动 */
}
.btn-group button:not(:last-child) {
border-right: none; /* 防止双边框 */
}
/* 清除浮动（clearfix hack） */
.btn-group:after {
content: "";
clear: both;
display: table;
}
/* 悬停时添加背景颜色 */
.btn-group button:hover {
background-color: #3e8e41;
}
自己动手试一试 »
两端对齐 / 全宽按钮组
示例
<!-- 按钮组中的三个按钮 -->
<div class="btn-group" style="width:100%">
<button style="width:33.3%">苹果</button>
<button style="width:33.3%">三星</button>
<button style="width:33.3%">索尼</button>
</div>
<!-- 按钮组中的四个按钮 -->
<div class="btn-group" style="width:100%">
<button style="width:25%">苹果</button>
<button style="width:25%">三星</button>
<button style="width:25%">索尼</button>
<button style="width:25%">HTC</button>
</div>
自己动手试一试 »
提示：访问我们的 CSS 按钮教程，了解更多关于如何设置按钮样式的信息。
