标签和单选按钮稍微错位，如何解决？答案

【问题标题】：Labels and Radio Buttons slightly misaligned, how to fix?标签和单选按钮稍微错位，如何解决？
【发布时间】：2020-08-21 11:49:35
【问题描述】：

我对编码很陌生，目前正在从事响应式网页设计认证。我正在进行一个使用基本 HTML 和 CSS 创建调查表的项目，并且必须实现一个单选部分。

问题是无线电输入和标签只是稍微错位，这让我发疯了。通过调整单选按钮的高度，我可以让它们看起来像是在直线上，但它永远不会完全正确。我试过填充、边距、行高和广泛的谷歌搜索都无济于事。我什至尝试切换到 CSS 网格，但这只会带来更多问题。我确信解决方案非常简单，我会很生气，但请帮助一个崭露头角的编码员:)

这里是codepen的链接：https://codepen.io/melv1ns/pen/NWNRBrB

HTML：

<p id = "radio-question">Would you recommend freeCodeCamp to a friend?</p>
    <div id= "radio-container">
      <label for = "definitely" class = "radio-labels">
        <input  id = "definitely" type = "radio" name = "recommend" class = "radio"> Definitely </label>
      
      <label for = "maybe" class = "radio-labels">
        <input  id = " maybe" type = "radio" name = "recommend" class = "radio"> Maybe</label>
      
      <label for = "not-sure" class = "radio-labels"> 
        <input  id = "not-sure" type = "radio" name = "recommend" class = "radio"> Not Sure</label>
    </div>

CSS：

input{
  width: 90%;
  height: 25px;
  margin-left: 20px;
  border-width: 1px;
  padding-left: 5px;
}

#radio-container{
  display: flex;
  flex-direction: column;
  align-items: start;
}

.radio-labels{
  height: auto;
  padding-bottom: 2px;
}

input[type = "radio"]{
  width: auto;
  height: 20px;
  margin-left: 20px;
}

#radio-question{
  margin-top: 20px;
  margin-bottom: 10px;
}

单选按钮及其标签略微未对齐

【问题讨论】：

标签： html css

【解决方案1】：

试试这个，

删除padding-bottom;

.radio-labels{
  padding-bottom:2px;
}

添加此样式

input[type = "radio"]{
  display: inline-block;
  vertical-align: bottom;
}

input{
  width: 90%;
  height: 25px;
  margin-left: 20px;
  border-width: 1px;
  padding-left: 5px;
}

#radio-container{
  display: flex;
  flex-direction: column;
  align-items: start;
}

.radio-labels{
  height: auto;
}

input[type = "radio"]{
  width: auto;
  height: 20px;
  margin-left: 20px;
    display: inline-block;
  vertical-align: bottom;
}

#radio-question{
  margin-top: 20px;
  margin-bottom: 10px;
}

<p id = "radio-question">Would you recommend freeCodeCamp to a friend?</p>
    <div id= "radio-container">
      <label for = "definitely" class = "radio-labels">
        <input  id = "definitely" type = "radio" name = "recommend" class = "radio"> Definitely </label>
      
      <label for = "maybe" class = "radio-labels">
        <input  id = " maybe" type = "radio" name = "recommend" class = "radio"> Maybe</label>
      
      <label for = "not-sure" class = "radio-labels"> 
        <input  id = "not-sure" type = "radio" name = "recommend" class = "radio"> Not Sure</label>
    </div>

【讨论】：