Как установить ширину в процентах на collection_check_boxes?

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, для равного разделения между теми, 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>