Выровненные кнопки текста и радио

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>

Здесь, в этом фрагменте, он работает совершенно нормально, но на веб-странице он выглядит так:

Я попытался использовать поле на полях, но это также не работает.

ОБНОВЛЕНИЕ : проблема решена.Это все из-за этого кода.

input {
    height: 30px;
}

Answer 1

Вы вкладываете текст и ввод в неправильной последовательности.Исправление и добавление /> во входные данные для хорошей меры исправляет это.

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

Answer 2

Если установить флажок влево, он может выглядеть лучше.Трудно сказать, основываясь на этом примере.

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