Горизонтальная линия между круглыми кнопками

Question

Я пытаюсь добиться горизонтальной линии между круглыми кнопками. Что-то вроде ниже. Я получил круглые кнопки, но я не уверен, как добиться горизонтальной линии (отзывчивой тоже) между каждой круглой кнопкой.

Пожалуйста, бросьте некоторые мысли и идеи.

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>