未对齐的文字和单选按钮

Question

所以我试图制作一个纯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>

在这个片段中，它工作得很好，但在网页上它显示如下

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

更新：问题解决了。这完全是因为这段代码。

input {
    height: 30px;
}

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;