无法正确对齐输入文本与单选按钮

Question

HTML

<fieldset>
        <label id="radio-buttons">Would you recommand this website?
            <input type="radio" name="radio" value="button" class="inline" checked>Yes</input>
            <input type="radio" name="radio" value="button" class="inline">No</input>
            <input type="radio" name="radio" value="button" class="inline">Maybe</input>
        </label>
</fieldset>

CSS

input{
    margin: 5px 0 0 0;
    width: 100%;
    min-height: 1.3em;
}
.inline{
     width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
} 

我尝试将单选按钮与文本本身对齐，但按钮最终比文本高出几个像素，我尝试了所有我能在网上找到的东西，但没有任何效果。

Answer 1

这可能是由

<label>

或

<fieldset>

元素上的默认填充或边距引起的。 尝试在您的 CSS 中为这些元素将 padding 和 margin 设置为 0，看看是否有帮助。

label, fieldset {
  padding: 0;
  margin: 0;
}

如果没有，您可以尝试调整 .inline 类的 line-height 属性，直到文本和单选按钮按照您想要的方式对齐。 例如：

.inline {
  line-height: 1.3em;
  /* rest of CSS */
}

Answer 2

min-height 偏移你的对齐方式。你可以放下它，一切都很好。 你也可以摆脱垂直对齐。

在那种情况下，你需要重新做整个事情。这是一个快速修复。这里有更多关于如何在未来正确设置它的信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

p {
  margin: 0;
  /* optional, for the sake of SO editing */
}

<fieldset>
  <p>Would you recommand this website?</p>
  <input type="radio" name="radio" value="button" id="yes" checked>
  <label for="yes">Yes</label><br>
  <input type="radio" name="radio" value="button" id="no">
  <label for="no">No</label><br>
  <input type="radio" name="radio" value="button" id="maybe">
  <label for="maybe">Maybe</label><br>
</fieldset>

Answer 3

<Label>

和

<input>

这样不行。

这种方式点击

Yes

，

No

或

Maybe

将影响他们各自的单选框。

fieldset {
  width     : fit-content;
  min-width : 20em;
  }
label {
  display : inline-block;
  margin  : .3em 2rem 0 0;
  }
 

<fieldset>
  <legend> Would you recommand this website? </legend>
  <label>
    <input type="radio" name="radio" value="Yes" checked >
    Yes
  </label>
  <label>
    <input type="radio" name="radio" value="No" >
    No
  </label>
  <label>
    <input type="radio" name="radio" value="Maybe" >
    Maybe
  </label>
</fieldset>