css 单选框和后面的文字对齐

CSS是前端开发中必不可少的一部分，它可以让我们的页面变得更加美观、可读性更好、交互性更强。本文将介绍如何让CSS单选框和后面的文字对齐。

/* HTML代码 */
<label class="radio-label">
  <input type="radio" name="radio-btn" />
  <span class="radio-text">选择项一</span>
</label>

/* CSS代码 */
.radio-label {
  display: inline-flex;
  align-items: center;
}

.radio-text {
  margin-left: 8px;
}

以上是样式代码，让我们来逐一解析。

首先是HTML代码，在一个label标签内，我们嵌套了一个单选框和一个展示文字的span标签。

然后是CSS代码，我们设置了.radio-label的display属性为inline-flex，这样可以让单选框和文字一行展示，并且使用align-items属性将它们的垂直对齐方式设置为居中。

接着我们针对.radio-text设置margin-left属性，让文字距离单选框有一定间距，这样能够更好地提高可读性。

最后预览效果如下：

选择项一

以上就是本文的全部内容，希望对您有所帮助！