css两个radio并排

在网页开发中，我们常常会遇到需要将两个radio按钮并排放置的情况。下面我们来学习如何通过CSS实现这样的布局。

<div class="radio-group">
  <div class="radio-inline">
    <input type="radio" id="radio1" name="radio-group" checked>
    <label for="radio1">Option 1</label>
  </div>
  <div class="radio-inline">
    <input type="radio" id="radio2" name="radio-group">
    <label for="radio2">Option 2</label>
  </div>
</div> 

首先，我们需要使用一个div元素来包裹这两个radio按钮，并设置其class为“radio-group”。然后我们在这个div元素里面再分别创建两个div元素，它们的class都是“radio-inline”。在每个“radio-inline”元素里面，我们都放置了一个input元素和一个label元素。其中input元素的type属性都设置为“radio”，name属性也需要相同，这样才能保证它们是一组单选按钮。label元素的for属性值需要和对应的input元素的id属性相同，这样点击label时也能选中对应的单选按钮。

.radio-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.radio-inline {
  margin-right: 10px;
} 

接下来，我们需要使用CSS来实现将这两个单选按钮并排放置。我们可以使用display属性并将其值设置为“flex”，这样就可以实现水平排列。我们还可以使用justify-content属性来使它们之间的间距均匀分布，这里我们使用的是“space-between”值。align-items属性可以使这两个单选按钮处于垂直居中的状态。最后，我们在每个“radio-inline”元素上设置margin-right属性来控制它们之间的距离。

通过以上CSS样式，我们就可以轻松地将两个radio按钮并排放置了。如果你需要更多的单选或复选按钮，只需要增加相应的div元素即可。