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 - 更容易此处调整大小