圆形按钮之间的水平线

Question

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

请抛出一些想法和想法。

O-----O-----O-----O

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>

圆形按钮之间的水平线

Horizontal line in between circular buttons

html

css

button

horizontal-line