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