按钮组

---

了解如何使用 CSS 创建"按钮组"。

---

水平按钮组

将一系列按钮组合在一个按钮组中的一行上:

Apple Samsung Sony
Apple Samsung Sony

亲自试一试 »

---

如何创建按钮组

步骤 1) 添加 HTML:

实例

<div class="btn-group">
  <button>Apple</button>
  <button>Samsung</button>
  <button>Sony</button>
</div>

---

步骤 2) 添加 CSS:

实例

.btn-group button {
  background-color: #4CAF50; /* 绿色背景 */
  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%">Apple</button>
  <button style="width:33.3%">Samsung</button>
  <button style="width:33.3%">Sony</button>
</div>

<!-- 一组四个按钮 -->
<div class="btn-group" style="width:100%">
  <button style="width:25%">Apple</button>
  <button style="width:25%">Samsung</button>
  <button style="width:25%">Sony</button>
  <button style="width:25%">HTC</button>
</div> 亲自试一试 »

提示: 转到我们的 CSS 按钮教程，了解更多关于如何设置按钮样式的信息。