圆形按钮之间的水平线

Question

我正试图在圆形按钮之间实现水平线。像下面的东西。我得到了圆形按钮，但我不确定如何在每个圆形按钮之间实现水平线（也是响应）。

请抛出一些想法和想法。

ØØ----- ------- ------ØØ

HTML代码：

<div class="modal-body"> 
    <div class="row-fluid"> 
    <button type="button" uncheckable class="btn btn-xl" ng-click="selected(0)">No </button> 
    <hr class="horizontal"/> 
    <button type="button" uncheckable class="btn btn-xl" ng-click="selected(2)">yes<br></button> 
    <hr class="horizontal"/> 
    <button type="button" uncheckable class="btn btn-xl" ng-click="selected(4)">may be<br></button> 
    <hr class="horizontal"/> 
    <button type="button" uncheckable class="btn btn-xl" ng-click="selected(6)">not sure<br></button> 
</div> 
</div> 

CSS代码：

.btn-xl { 
    width: 80px; 
    height: 80px; 
    padding: 10px 10px; 
    line-height: 1.33; 
    border-radius: 50%; 
    background-color: #ffffff; 
    text-align: center; 
    font-size: 14px; 
    border-width: 2px; 
    border-color: #00ABE2; 
} 

.horizontal{ 
    display: block; 
    position: relative; 
    padding: 0px; 
    width:30%; 
    margin-top: 0px !important; 
    margin-bottom: 0px !important; 
    margin-left: auto; 
    margin-right: auto; 
    border: 0; 
    border-top: 1px solid #00ABE2;} 

Answer 1

像这样的东西可能是你在找什么？

的jsfiddle：https://jsfiddle.net/d1u9fngq/

CSS：

.btn-xl { 
    width: 80px; 
    height: 80px; 
    padding: 10px 10px; 
    line-height: 1.33; 
    border-radius: 50%; 
    background-color: #ffffff; 
    text-align: center; 
    font-size: 14px; 
    border-width: 2px; 
    border-color: #00ABE2; 
    display: inline-block; 
} 

.horizontal{ 
    display: inline-block; 
    width: 100px; 
} 

HTML：

<div class="modal-body"> 
    <div class="row-fluid"> 
    <button type="button" uncheckable class="btn btn-xl" ng-click="selected(0)">No </button> 
    <hr class="horizontal"/> 
    <button type="button" uncheckable class="btn btn-xl" ng-click="selected(2)">yes<br></button> 
    <hr class="horizontal"/> 
    <button type="button" uncheckable class="btn btn-xl" ng-click="selected(4)">may be<br></button> 
    <hr class="horizontal"/> 
    <button type="button" uncheckable class="btn btn-xl" ng-click="selected(6)">not sure<br></button> 
</div>