html - 在范围输入后面画一条线

我正在尝试实现一个Likert规模的UI。我想让绿线在单选按钮后面。我试着换了一下z-index，但是没有运气。。。

#container {
    text-align: justify;
    background-color: #ff5050;
    position: relative;
}
.line {
  width: 100%;
  height: 2px;
  background-color: green;
  position: absolute;
  top: 5px;
  z-index: 0;
}
input[type=radio] {
  display: block;
  margin: auto;
  z-index: 1;
}
.box {

  width: 60px;
  vertical-align: top;
  display: inline-block;
  text-align: center;
}
.stretch {
    width: 100%;
    display: inline-block;
}

<div id="container">
    <div class="box">
      <input type="radio" name="radio"/>
      <label>A</label>
    </div>
    <div class="box">
      <input type="radio" name="radio"/>
      <label>B</label>
    </div>
    <div class="box">
      <input type="radio" name="radio"/>
      <label>C</label>
    </div>
    <div class="box">
      <input type="radio" name="radio"/>
      <label>D</label>
    </div>
    <div class="box">
      <input type="radio" name="radio"/>
      <label>E</label>
    </div>
    <div class="box">
      <input type="radio" name="radio"/>
      <label>F</label>
    </div>
    <div class="line"></div>
    <span class="stretch"></span>
</div>

最佳答案

z-index只能与position一起使用。
将position添加到input[type=radio]将满足您的要求。

#container {
    text-align: justify;
    background-color: #ff5050;
    position: relative;
}
.line {
  width: 100%;
  height: 2px;
  background-color: green;
  position: absolute;
  top: 5px;
  z-index: 0;
}
input[type=radio] {
  position:relative;
  display: block;
  margin: auto;
  z-index: 1;
}
.box {

  width: 60px;
  vertical-align: top;
  display: inline-block;
  text-align: center;
}
.stretch {
    width: 100%;
    display: inline-block;
}

<div id="container">
    <div class="box">
      <input type="radio" name="radio"/>
      <label>A</label>
    </div>
    <div class="box">
      <input type="radio" name="radio"/>
      <label>B</label>
    </div>
    <div class="box">
      <input type="radio" name="radio"/>
      <label>C</label>
    </div>
    <div class="box">
      <input type="radio" name="radio"/>
      <label>D</label>
    </div>
    <div class="box">
      <input type="radio" name="radio"/>
      <label>E</label>
    </div>
    <div class="box">
      <input type="radio" name="radio"/>
      <label>F</label>
    </div>
    <div class="line"></div>
    <span class="stretch"></span>
</div>

关于html - 在范围输入后面画一条线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48333330/