css 单选框和文字各成一行

在网页设计中，单选框是一种非常常见的表单元素。为了美化表单，我们通常会对单选框进行样式调整，并且让单选框的文字与单选框成为一行，以达到更好的视觉效果。

/* CSS代码 */input[type="radio"] {
       /* 隐藏单选框默认样式 */   display: none;
}
input[type="radio"] + label {
       /* 设置单选框样式 */   display: inline-block;
       width: 20px;
       height: 20px;
       border-radius: 50%;
       border: 1px solid #999;
       position: relative;
       margin-right: 10px;
       top: -2px;
}
input[type="radio"]:checked + label::after {
       /* 设置单选框选中状态样式 */   content: "";
       width: 12px;
       height: 12px;
       border-radius: 50%;
       position: absolute;
       top: 3px;
       left: 3px;
       background-color: #333;
}
label {
       /* 文字和单选框成一行 */   display: inline-flex;
       align-items: center;
}
    

上述代码中，我们首先隐藏了单选框的默认样式，然后使用 label 标签来样式化单选框。在 label 标签中，我们通过设置 display: inline-flex; 和 align-items: center; 让单选框和文字成为一行。

combine:让单词保持在同一行，使用 combine 属性设置：

label {
      display: inline-grid;
      grid-template-columns: min-content repeat( auto-fit, minmax(min-content, max-content) );
      grid-gap: 10px;
      align-items: center;
}
label input[type="radio"] {
      display: none;
      width: auto;
      margin-right: 5px;
}
    

上述代码中，我们设置了 label 的 display 为 inline-grid，将其转为网格布局，并设置了 grid-template-columns 为 min-content repeat(auto-fit, minmax(min-content, max-content))。这表示 label 中的每个元素依次排列，第一个元素（即单选框）宽度为 min-content，后面的元素（即文本）宽度自适应（即 minmax(min-content, max-content)）。

同时，为了让单选框和文字保持对齐，我们设置了 align-items: center; 属性。最后，为了隐藏单选框的默认样式，我们设置 input[type="radio"] 的 display 为 none，同时对 label 中的单选框设置了 margin-right: 5px，让单选框和文字之间保持一定的距离。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！