在范围输入后面画一条线

Question

我正在尝试实现一个李克特量表 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>

Answer 1

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>

Answer 2

请注意，z-index 仅适用于具有position 的元素。因此，您的input 元素没有应用z-index，并使用默认值0。

层次结构有点复杂，.box 是.line 的兄弟。因此，您的所有.box 元素都与您的行的z-index 相同。

要在注释后面加上一行，您需要将值-1 用于.line。请注意，这实际上会将.line 放在容器后面，因为这也默认为0。因此，您还需要在#container 上设置-1 的值。

最终，您只需要确保四件事：

1. .line 的z-index 等于或大于#container
2. .box 的 z-index 高于 .line
3. input 的z-index 等于或大于.box
4. 所有带有z-index 的元素也有position

这可以在下面看到，它只在#container和.line上设置了一个-1z-index：

#container {
  text-align: justify;
  background-color: #ff5050;
  position: relative;
  z-index: -1;
}

.line {
  width: 100%;
  height: 2px;
  background-color: green;
  position: absolute;
  top: 5px;
  z-index: -1;
}

input[type=radio] {
  display: block;
  margin: auto;
}

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

希望这会有所帮助！ :)