在范围输入后面画一条线

Question

我正在尝试实施Likert量表UI。我想把绿线放在单选按钮后面。我尝试更改z-index，但没有运气......

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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。因此，您还需要在-1上设置#container的值。

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

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

这可以在以下内容中看到，它仅在position和-1上设置z-index #container：

.line

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

希望这有帮助！ ：）