CSS：設置div的背景顏色填充

Question

請看看這個codepen：CodePen。我有以下的html：

<fieldset class="rangeset"> 
    <div class="range-container"> 
     <label for="question_three_radio_01"> 
      <input id="question_three_radio_01" name="question_three" type="radio" value="0" /><span></span> 
     </label> 
     <label for="question_three_radio_02"> 
      <input id="question_three_radio_02" name="question_three" type="radio" value="1" /><span></span> 
     </label> 
     <label for="question_three_radio_03"> 
      <input id="question_three_radio_03" name="question_three" type="radio" value="2" /><span></span> 
     </label> 
     <label for="question_three_radio_04"> 
      <input id="question_three_radio_04" name="question_three" type="radio" value="3" /><span></span> 
     </label> 
     <label for="question_three_radio_05"> 
      <input id="question_three_radio_05" name="question_three" type="radio" value="4" /><span></span> 
     </label> 
     <label for="question_three_radio_06"> 
      <input id="question_three_radio_06" name="question_three" type="radio" value="5" /><span></span> 
     </label> 
    </div> 
</fieldset> 

而這個CSS：

[type="radio"] { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

.radio-label { 
    display: block; 
    cursor: pointer; 
    line-height: 0; 
} 

[type="radio"] + span:before { 
    content: ''; 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    vertical-align: -5px; 
    border: 2px solid #fff; 
    box-shadow: 0 0 0 2px #000; 
    margin-right: 20px; 
    transition: 0.5s ease all; 
} 

[type="radio"]:checked + span:before { 
    background: #A4B162; 
    box-shadow: 0 0 0 4px #48530D; 
} 

fieldset { 
    border: 2px solid #48530D; 
    padding-top: 27px; 
    padding-right: 20px; 
    padding-bottom: 0px; 
    padding-left: 20px; 
} 

.rangeset { 
    padding-top: 27px; 
    padding-right: 0px; 
    padding-bottom: 20px; 
} 

.range-container { 
    display: flex; 
    justify-content: space-between; 
} 

我現在想要做的是創造一個背景顏色是一樣厚和寬爲所有單選按鈕一起。我試圖設置div的背景顏色，但結果是這樣的：CodePen 2

這裏設置的背景顏色已經和單選按鈕一樣厚（如此完美），但是如果你看一下非常合適的單選按鈕，看到背景顏色比所有的單選按鈕都寬。我想要在最後一個單選按鈕結束時停止背景顏色。

你有什麼想法嗎？

Answer 1

你可能是困惑設置您的利潤。

.rangeset重置padding-right to 0;

跨度：之前給出一個margin-right了。

看到http://codepen.io/anon/pen/ojJOWM?editors=110

[type="radio"] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 

 
.radio-label { 
 
    display: block; 
 
    cursor: pointer; 
 
    line-height: 0; 
 
} 
 

 
[type="radio"] + span:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    vertical-align: -5px; 
 
    border: 2px solid #fff; 
 
    box-shadow: 0 0 0 2px #000; 
 
    margin-right: 20px;/* remove this from last label span */ 
 
    transition: 0.5s ease all; 
 
} 
 

 
[type="radio"]:checked + span:before { 
 
    background: #A4B162; 
 
    box-shadow: 0 0 0 4px #48530D; 
 
} 
 

 
fieldset { 
 
    border: 2px solid #48530D; 
 
    padding: 27px 20px; 
 
    display: block; 
 
} 
 

 
.rangeset { 
 
    padding-top: 27px; 
 
    padding-right: 0px;/* it doesn-t remove the margin-right of last label span:before */ 
 
    padding-bottom: 20px; 
 
} 
 

 
.range-container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    background: #A4B162; 
 
} 
 

 
label:last-child span:before { 
 
    margin-right: 0; 
 
}

<fieldset class="rangeset"> 
 
    <div class="range-container"> 
 
    <label for="question_three_radio_01"> 
 
     <input id="question_three_radio_01" name="question_three" type="radio" value="0" /><span></span> 
 
    </label> 
 
    <label for="question_three_radio_02"> 
 
     <input id="question_three_radio_02" name="question_three" type="radio" value="1" /><span></span> 
 
    </label> 
 
    <label for="question_three_radio_03"> 
 
     <input id="question_three_radio_03" name="question_three" type="radio" value="2" /><span></span> 
 
    </label> 
 
    <label for="question_three_radio_04"> 
 
     <input id="question_three_radio_04" name="question_three" type="radio" value="3" /><span></span> 
 
    </label> 
 
    <label for="question_three_radio_05"> 
 
     <input id="question_three_radio_05" name="question_three" type="radio" value="4" /><span></span> 
 
    </label> 
 
    <label for="question_three_radio_06"> 
 
     <input id="question_three_radio_06" name="question_three" type="radio" value="5" /><span></span> 
 
    </label> 
 
    </div> 
 
</fieldset>

Answer 2

這裏有一種方法：

1 - 我改變.range-container以下幾點：

.range-container { 
    display: flex; 
    justify-content: space-between; 
    position:relative; 
} 

2 - 然後補充說：

.range-container:before { 
    display:block; 
    width:calc(100% + 20px); 
    height:calc(100% + 27px + 20px); 
    position:absolute; 
    top:-27px; 
    left:-20px; 
    content: ''; 
    z-index:-1; 
    background: #A4B162; 
} 

這裏的codepen：
http://codepen.io/Meligy/pen/EVGJmb