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>

圆形按钮之间的水平线

1 个答案: