這個問題在這里已經有了答案： 將行內塊 DIV 與容器元素的頂部對齊 （4 個回答） 3 小時前關閉。
我的問題如下：我該怎么做（在 HTML、CSS 或兩者中）將單選按鈕向下移動？我希望它使第一個單選按鈕與問題一致，并且以下單選按鈕位于第一個下方，即以 1、2、3 的順序列出。
我的 HTML 是：
<div class="question">
<label>At what time of day did it happen?</label>
</div>
<div class="answer">
<input type="radio" id="morning"><label for="morning"> Morning</label><br>
<input type="radio" id="afternoon"><label for="afternoon"> Afternoon</label><br>
<input type="radio" id="evening"><label for="evening"> Evening</label>
</div>
我的 CSS 是：
.question {
border: 1px solid black;
display: inline-block;
width: 45%;
text-align: right;
}
.answer {
border: 1px solid black;
display: inline-block;
text-align: left;
width: 45%;
}
uj5u.com熱心網友回復：
在這種情況下，您可以使用額外的 divwrapper類容器和flexbox屬性align-items:flex-start，justify-content: center以及類似gap屬性的一點空白。
.wrapper{
display: flex;
align-items:flex-start;
justify-content: center;
gap: 1rem;
}
.question {
border: 1px solid black;
display: inline-block;
width: 45%;
text-align: right;
}
.answer {
border: 1px solid black;
display: inline-block;
text-align: left;
width: 45%;
}<div class="wrapper">
<div class="question">
<label>At what time of day did it happen?</label>
</div>
<div class="answer">
<input type="radio" id="morning"><label for="morning"> Morning</label><br>
<input type="radio" id="afternoon"><label for="afternoon"> Afternoon</label><br>
<input type="radio" id="evening"><label for="evening"> Evening</label>
</div>
</div>uj5u.com熱心網友回復：
我想到了。我只需要添加vertical-align: top;到.answer的 CSS
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/359292.html