Question

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

现在问题是，如果我将它设置为18％，背景颜色变为自身的18％而不是更大的容器。

红宝石

<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，以便在这些input之间进行平等划分

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想保留18%，则此处为代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: