html - 如何在 collection_check_boxes 上将宽度设置为百分比？

Question

如何在 collection_check_boxes 上将宽度设置为百分比？由于有 7 个复选框，我希望每个复选框都占 18%。

现在的问题是，如果我将其设置为 18%，背景颜色将变为自身的 18%，而不是相对于较大容器的位置。

ruby

<div class="challenge-do-on">
  <%= f.collection_check_boxes :committed, Date::ABBR_DAYNAMES, :downcase, :to_s %>
</div>

HTML 输出

<div class="challenge-do-on">

<span><label for="challenge_committed_sun"><input type="checkbox" value="sun" checked="checked" name="challenge[committed][]" id="challenge_committed_sun"><label class="collection_check_boxes"for="challenge_committed_sun">Sun</label></label></span>

<span><label for="challenge_committed_mon"><input type="checkbox" value="mon" checked="checked" name="challenge[committed][]" id="challenge_committed_mon"><label class="collection_check_boxes" for="challenge_committed_mon">Mon</label></label></span>

<span><label for="challenge_committed_tue"><input type="checkbox" value="tue" checked="checked" name="challenge[committed][]" id="challenge_committed_tue"><label class="collection_check_boxes" for="challenge_committed_tue">Tue</label></label></span>

<span><label for="challenge_committed_wed"><input type="checkbox" value="wed" checked="checked" name="challenge[committed][]" id="challenge_committed_wed"><label class="collection_check_boxes" for="challenge_committed_wed">Wed</label></label></span>

<span><label for="challenge_committed_thu"><input type="checkbox" value="thu" checked="checked" name="challenge[committed][]" id="challenge_committed_thu"><label class="collection_check_boxes" for="challenge_committed_thu">Thu</label></label></span>

<span><label for="challenge_committed_fri"><input type="checkbox" value="fri" checked="checked" name="challenge[committed][]" id="challenge_committed_fri"><label class="collection_check_boxes" for="challenge_committed_fri">Fri</label></label></span>

<span><label for="challenge_committed_sat"><input type="checkbox" value="sat" checked="checked" name="challenge[committed][]" id="challenge_committed_sat"><label class="collection_check_boxes" for="challenge_committed_sat">Sat</label></label></span>

</div>

Answer 1

使用 width: calc(100%/7) 和 display:inline-block，在这 7 个 input 之间进行均分

---

.collection_check_boxes {
  width: calc(100% / 7);
  display: inline-block;
  background:red
}

<div class="challenge-do-on">

  <span><label for="challenge_committed_sun"><input type="checkbox" value="sun" checked="checked" name="challenge[committed][]" id="challenge_committed_sun"><label class="collection_check_boxes"for="challenge_committed_sun">Sun</label></label></span>

  <span><label for="challenge_committed_mon"><input type="checkbox" value="mon" checked="checked" name="challenge[committed][]" id="challenge_committed_mon"><label class="collection_check_boxes" for="challenge_committed_mon">Mon</label></label></span>

  <span><label for="challenge_committed_tue"><input type="checkbox" value="tue" checked="checked" name="challenge[committed][]" id="challenge_committed_tue"><label class="collection_check_boxes" for="challenge_committed_tue">Tue</label></label></span>

  <span><label for="challenge_committed_wed"><input type="checkbox" value="wed" checked="checked" name="challenge[committed][]" id="challenge_committed_wed"><label class="collection_check_boxes" for="challenge_committed_wed">Wed</label></label></span>

  <span><label for="challenge_committed_thu"><input type="checkbox" value="thu" checked="checked" name="challenge[committed][]" id="challenge_committed_thu"><label class="collection_check_boxes" for="challenge_committed_thu">Thu</label></label></span>

  <span><label for="challenge_committed_fri"><input type="checkbox" value="fri" checked="checked" name="challenge[committed][]" id="challenge_committed_fri"><label class="collection_check_boxes" for="challenge_committed_fri">Fri</label></label></span>

  <span><label for="challenge_committed_sat"><input type="checkbox" value="sat" checked="checked" name="challenge[committed][]" id="challenge_committed_sat"><label class="collection_check_boxes" for="challenge_committed_sat">Sat</label></label></span>

</div>

如果您想保留 18%，这里有一个片段

---

.collection_check_boxes {
  width: 18%;
  display: inline-block;
  background:red
}

<div class="challenge-do-on">

  <span><label for="challenge_committed_sun"><input type="checkbox" value="sun" checked="checked" name="challenge[committed][]" id="challenge_committed_sun"><label class="collection_check_boxes"for="challenge_committed_sun">Sun</label></label></span>

  <span><label for="challenge_committed_mon"><input type="checkbox" value="mon" checked="checked" name="challenge[committed][]" id="challenge_committed_mon"><label class="collection_check_boxes" for="challenge_committed_mon">Mon</label></label></span>

  <span><label for="challenge_committed_tue"><input type="checkbox" value="tue" checked="checked" name="challenge[committed][]" id="challenge_committed_tue"><label class="collection_check_boxes" for="challenge_committed_tue">Tue</label></label></span>

  <span><label for="challenge_committed_wed"><input type="checkbox" value="wed" checked="checked" name="challenge[committed][]" id="challenge_committed_wed"><label class="collection_check_boxes" for="challenge_committed_wed">Wed</label></label></span>

  <span><label for="challenge_committed_thu"><input type="checkbox" value="thu" checked="checked" name="challenge[committed][]" id="challenge_committed_thu"><label class="collection_check_boxes" for="challenge_committed_thu">Thu</label></label></span>

  <span><label for="challenge_committed_fri"><input type="checkbox" value="fri" checked="checked" name="challenge[committed][]" id="challenge_committed_fri"><label class="collection_check_boxes" for="challenge_committed_fri">Fri</label></label></span>

  <span><label for="challenge_committed_sat"><input type="checkbox" value="sat" checked="checked" name="challenge[committed][]" id="challenge_committed_sat"><label class="collection_check_boxes" for="challenge_committed_sat">Sat</label></label></span>

</div>