html两个性别按钮并排,css实现男女切换按钮

可以使用HTML的`input`元素来创建性别切换按钮，然后利用CSS实现它们并排显示，例如：

HTML代码：

<label>
  <input type="radio" name="gender" value="male" checked>
  男
</label>
<label>
  <input type="radio" name="gender" value="female">
  女
</label>

CSS代码：

label {
  display: inline-block;
  margin-right: 10px;
}

input[type="radio"] {
  display: none;
}

input[type="radio"] + label:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  cursor: pointer;
}

input[type="radio"]:checked + label:before {
  background-color: #007bff;
}

其中，`label`元素用于包裹`input`元素和文本，通过`display: inline-block`和`margin-right`属性实现水平排列。`input[type="radio"]`元素通过`display: none`属性隐藏原生的单选按钮，然后使用`input[type="radio"] + label:before`选择器选择`input`元素后面的`label`元素前面的伪元素，利用CSS样式生成圆形按钮，并通过`margin-right`和`vertical-align`属性对齐文本。最后，使用`input[type="radio"]:checked + label:before`选择器实现选中状态下的样式。

这样就可以实现一个简单的性别切换按钮了。