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嵌套到标签标签中，然后为标签设置样式

＆＃13;

.scores label {
  white-space: nowrap;
}

＆＃13;

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

＆＃13;

Demo - 更容易调整大小

css响应复选框

1 个答案: