如何获得按钮后面的水平线？

Question

大家好，我试图在按钮后面创建背景线，之前我正在使用图像，但我想要这条线。

<div class="feedback-option">
  <div class="radios2">
    <label>
      <input type="radio" name="rating-1" value="1">
      <span>1</span>
    </label>
    <label>
      <input type="radio" name="rating-1" value="2" />
      <span>2</span>
    </label>
    <label>
      <input type="radio" name="rating-1" value="3">
      <span>3</span>
    </label>
    <label>
      <input type="radio" name="rating-1" value="4">
      <span>4</span>
    </label>
    <label>
      <input type="radio" name="rating-1" value="5">
      <span>5</span>
    </label>
  </div>
</div>

JsFiddle

Answer 1

由于HTML中没有行。我通过添加空div与必需background-color和height来实现相同目标。并position: absolute将其放置在需要的位置。

.line {
  position: absolute;
  top: 25px;
  height: 5px;
  width: 100%;
  background-color: black;
}

P.S：我认为你试图将无线电中心化。为此，我更改了display: block;的{​​{1}}。

＆＃13;

＆＃13;

.radios2

＆＃13;

.radios2 {
  display: block;
  text-align: center;
}

.line {
  position: absolute;
  top: 25px;
  height: 5px;
  width: 100%;
  background-color: black;
}

.radios2 label + label {
    margin-left: 10px;
}

.radios2 input[type="radio"] {
    opacity: 0;
    /* hidden but still tabable */
    position: absolute;
}

.radios2 input[type="radio"] + span {
    display: block;
    line-height: 40px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: #eee;
    color: #555;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.radios2 input[type="radio"]:not(:checked) + span:hover {
    cursor: pointer;
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
    transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
}

.radios2 input[type="radio"]:checked + span {
    color: #D9E7FD;
    background-color: #4285F4;
}

.radios2 input[type="radio"]:focus + span {
    color: #fff;
}

label {
  display: inline-block;
}

＆＃13;

＆＃13;

＆＃13;