未对齐的文本和单选按钮答案

【问题标题】：Unaligned Text and Radio Buttons未对齐的文本和单选按钮
【发布时间】：2018-06-02 12:29:54
【问题描述】：

所以我试图用纯 html 和 css 制作一个表单，但我遇到了单选按钮的问题。它们与文本不对齐。

.row {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 40% 30%;
    align-content: center;
    grid-gap: 20px;
}

<div class="row">
    <label id="number-label" for="Age">* How likely is that you would recommend
        freeCodeCamp to a friend?</label>
    <ul style="list-style:none">
        <li class="radio">
            <label>Definitely<input type="radio" name="radio-button" order="1"
                    class="userRating"></label>
        </li>
    </ul>
</div>

在这个 sn-p 中，它工作得很好，但在网页上它显示如下

我尝试使用 margin-bottom 但效果不佳。

更新：问题已解决。都是因为这段代码。

input {
    height: 30px;
}

【问题讨论】：

标签： html css radio-button

【解决方案1】：

通过将复选框浮动到左侧，它可能看起来更好。根据这个例子很难说。

.row {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 40% 30%;
    align-content: center;
    grid-gap: 20px;
}
input[type=radio] {
float: left;
}

 <div class="row">
                    <label id="number-label" for="Age">* How likely is that you would recommend freeCodeCamp to a friend?</label>
                    <ul style="list-style:none">
                        <li class="radio">
                            <label>Definitely<input type="radio" name="radio-button" order="1" class="userRating"></label>
                        </li>
                        
                        
                    </ul>
                    </div>

【讨论】：

【解决方案2】：

您以错误的顺序嵌套文本和输入。更正它并在输入中添加/> 以获得良好的测量修复它。

.row {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 40% 30%;
    align-content: center;
    grid-gap: 20px;
}

 <div class="row">
                    <label id="number-label" for="Age">* How likely is that you would recommend freeCodeCamp to a friend?</label>
                    <ul style="list-style:none">
                        <li class="radio">
                            <label><input type="radio" name="radio-button" order="1" class="userRating" />Definitely</label>
                        </li>
                        
                        
                    </ul>
                    </div>

【讨论】：