[分享]css单选按钮组变为横排显示

对于css单选按钮组，原本是纵向排列的。但是，有时候我们需要将单选按钮组变为横向的，以便更好地满足页面布局与设计风格的需求。 / html代码 / 选项一 选项二 选项三 / css代码 /...

对于css单选按钮组，原本是纵向排列的。但是，有时候我们需要将单选按钮组变为横向的，以便更好地满足页面布局与设计风格的需求。

/* html代码 */
<div class="radio-group">
  <input type="radio" name="radio-group" id="radio1">
  <label for="radio1">选项一</label>
  <input type="radio" name="radio-group" id="radio2">
  <label for="radio2">选项二</label>
  <input type="radio" name="radio-group" id="radio3">
  <label for="radio3">选项三</label>
</div>

/* css代码 */
.radio-group label {
  display: inline-block; /* 将label变为块级元素，便于设置宽度和高度 */
  width: 100px; /* 设置单选按钮的宽度和高度 */
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #ddd;
  border-radius: 5px; /* 设置圆角 */
  margin-right: 10px; /* 为单选按钮之间增加间距 */
}

.radio-group label:hover {
  background-color: #ccc; /* 鼠标悬浮时选项变暗 */
}

.radio-group input[type="radio"] {
  display: none; /* 将单选按钮隐藏 */
}

.radio-group input[type="radio"]:checked + label{
  background-color: #007acc; /* 选中的单选按钮颜色变为蓝色 */
  color: #fff;
} 

上述代码中，我们通过将单选按钮的容器设为行内元素，将单选按钮的标签设为块级元素，并相应的设置它们的宽度，高度，边框样式和对齐方式等，最终将从纵向变为横向排列的单选按钮实现了简单的布局变化和风格变化，这样可以更加方便地满足我们的设计要求。