如何獲得按鈕後面的水平線？

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放置在需要的地方。 P：我想你是試圖把收音機放在中心位置。爲此，我已將display: block;更改爲.radios2。

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

<div class="feedback-option"> 
 
<div class="line"></div> 
 
    <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>