如何在页面中创建一组按钮?

创建一组按钮可以让用户快速选择多个选项，可以通过HTML和CSS来实现。下面介绍几种常见的创建一组按钮的方法。

HTML中使用标签

使用<input>标签创建按钮组，可以通过设置type属性为radio或checkbox来设置单选或多选按钮组。

示例代码：

<form>
  <input type="radio" id="button1" name="button-group" value="button1">
  <label for="button1">Button 1</label>

  <input type="radio" id="button2" name="button-group" value="button2">
  <label for="button2">Button 2</label>

  <input type="checkbox" id="button3" name="button-group" value="button3">
  <label for="button3">Button 3</label>

  <input type="checkbox" id="button4" name="button-group" value="button4">
  <label for="button4">Button 4</label>
</form>

输出效果：

使用CSS框架库

现在很多前端框架库都提供了按钮组的组件，使用这些组件可以减少代码量，提高开发效率。

例如Bootstrap中的按钮组组件：

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Button 1</button>
  <button type="button" class="btn btn-primary">Button 2</button>
  <button type="button" class="btn btn-primary">Button 3</button>
</div>

输出效果：

使用CSS自定义样式

还可以使用CSS自定义按钮组的样式，这需要在HTML中定义一个容器，然后使用CSS设置子元素的样式。

示例代码：

<div class="button-group">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

.button-group {
  display: flex;
  justify-content: center;
}

.button-group button {
  background-color: #e7e7e7;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

输出效果：

结论

以上介绍了创建一组按钮的几种方法，可以根据实际情况选择适合自己的方法。HTML和CSS组合使用可以轻松创建一组自定义样式的按钮组，使用前端框架库的按钮组件可以节省代码量和开发时间。