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

此处设置的背景颜色已经与radiobuttons一样厚（所以它非常完美）但是如果你看一下非常正确的radiobutton，你会发现背景颜色比所有的radiobutton都宽。我希望背景颜色停在最后一个radiobutton的末尾。

你有什么想法吗？

Answer 1

这是一种方式：

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

Answer 2

您可能很困惑设置您的边距。

.rangeset reset padding-right to 0;

span：before也给出margin-right。

请参阅http://codepen.io/anon/pen/ojJOWM?editors=110

＆＃13;

＆＃13;

[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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;