[分享]css两个radio并排显示

在设计一个网页时，我们有时会想要两个radio并排显示。在CSS中，我们可以使用不同的方法来实现这一目的。下面是两种常见的方式。//方式一：使用display:inlineblock .radio{ ...

在设计一个网页时，我们有时会想要两个radio并排显示。在CSS中，我们可以使用不同的方法来实现这一目的。下面是两种常见的方式。

//方式一：使用display:inline-block
.radio{
  display: inline-block;
  width: 100px; //自定义宽度
}
<input type="radio" name="radio" class="radio" id="radio1" value="radio1" checked>
<label for="radio1">Radio 1</label>
<input type="radio" name="radio" class="radio" id="radio2" value="radio2">
<label for="radio2">Radio 2</label> 

这种方法的原理是将每个radio设置为inline-block，使它们在同一行显示。同时，通过为radio设置一个自定义的宽度，使得两个radio之间的水平间距变为我们需要的距离。

//方式二：使用float:left
.radio{
  float: left;
  /*以下三行用于清除浮动影响*/
  display: inline-block;
  width: 100px;
  margin-right: 10px;
}
<input type="radio" name="radio" class="radio" id="radio3" value="radio3" checked>
<label for="radio3">Radio 3</label>
<input type="radio" name="radio" class="radio" id="radio4" value="radio4">
<label for="radio4">Radio 4</label> 

这种方法的原理是使用float:left，使每个radio向左浮动。同时，为了防止浮动影响到后面的元素，我们需要在每个radio上设置一个清除浮动影响的规则。具体来说，我们为每个radio都设置display:inline-block、width和margin-right，其中right值就是我们需要的间距。

上面是CSS两个radio并排显示的两种常见方式。在实际使用中，我们可以按照自己的需求选择相应的方式。