css響應複選框

Question

我遇到了複選框和標籤問題。當我重新大小屏幕標籤分割線，並且複選框應該也分裂跟隨標籤。當前，當標籤停留在新行，但複選框不留在標籤的相同的地方。我需要的是響應時配對新行。

任何人有什麼想法？預先感謝您的幫助！

下面是我的代碼

<div id="score"> 
    <input type="radio" id="score_0" name="score" required="required" value="1"> 
    <label for="score_0" class="required">E</label> 

    <input type="radio" id="score_1" name="score" required="required" value="2"> 
    <label for="score_1" class="required">D</label> 

    <input type="radio" id="score_2" name="score" required="required" value="3"> 
    <label for="score_2" class="required">C</label> 

    <input type="radio" id="score_3" name="score" required="required" value="4"> 
    <label for="score_3" class="required">B</label> 

    <input type="radio" id="score_4" name="score" required="required" value="5"> 
    <label for="score_4" class="required">B+</label> 

    <input type="radio" id="score_5" name="score" required="required" value="6"> 
    <label for="score_5" class="required">A</label> 

    <input type="radio" id="score_6" name="score" required="required" value="7"> 
    <label for="score_6" class="required">S</label> 
</div> 

Answer 1

實際上，你可以嵌套你inputs到標籤的標籤，然後設置樣式爲標籤

.scores label { 
 
    white-space: nowrap; 
 
}

<div class="scores"> 
 
    <label for="score_1" class="required"> 
 
    <input type="radio" id="score_1" name="score" required="required" value="2">D</label> 
 
    <label for="score_2" class="required"> 
 
    <input type="radio" id="score_2" name="score" required="required" value="3">C</label> 
 
    <label for="score_3" class="required"> 
 
    <input type="radio" id="score_3" name="score" required="required" value="4">B</label> 
 
    <label for="score_4" class="required"> 
 
    <input type="radio" id="score_4" name="score" required="required" value="5">B+</label> 
 
    <label for="score_5" class="required"> 
 
    <input type="radio" id="score_5" name="score" required="required" value="6">A</label> 
 
    <label for="score_6" class="required"> 
 
    <input type="radio" id="score_6" name="score" required="required" value="7">S</label> 
 
</div>

Demo - 更容易此處調整大小