По сути, я пытаюсь расположить все мои кнопки вертикально, как в первом вопросе. Я не могу понять, почему я не могу правильно настроить второй вопрос. Я пробовал разные вещи, такие как использование свойства vertical-align: middle, но я не могу заставить что-либо работать
body {
margin: 0px;
background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
}
#wrapper {
padding-top: 0px;
text-align: center;
margin-top: -1%;
margin-left: 20%;
margin-right: 20%;
background-color: white;
clear: both;
}
#quiz {
padding-bottom: 10px;
}
#quiz li {
list-style-type: none;
}
.question {
padding-bottom: 10px;
vertical-align: middle;
}
<div id="wrapper">
<div id="quiz">
<form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false">
<li>
<div class="question">1. How many continents are there?</div>
</li>
<input id="answer" type="radio" name="group1" value="wrong"> 6<br>
<input id="answer" type="radio" name="group1" value="wrong"> 8<br>
<input id="answer" type="radio" name="group1" value="correct"> 7<br>
<input id="answer" type="radio" name="group1" value="wrong"> 5
<hr>
<li>
<div class="question">2. Where is France located?</div>
</li>
<input id="answer" type="radio" name="group2" value="correct">Europe<br>
<input id="answer" type="radio" name="group2" value="wrong">Asia<br>
<input id="answer" type="radio" name="group2" value="wrong">Antarctica<br>
<input id="answer" type="radio" name="group2" value="wrong">North America
<hr>
</form>
</div>
</div>