设置复选框的水平样式，类似于进度条

Question

我有一组复选框，基本上是一个接一个地呈现。

<div class="myCheck">
    <h5>You have choosen so far</h5>
    <label class="mdl-checkbox mdl-js-checkbox  mdl-js-ripple-effect" >
        <input type="checkbox" [(ngModel)]="hasHall" class="mdl-checkbox__input" disabled />
        <span class="mdl-checkbox__label">Marriage Hall</span> 
    </label>

    <label class="mdl-checkbox mdl-js-checkbox  mdl-js-ripple-effect" >
        <input type="checkbox" [(ngModel)]="hasCaterer" class="mdl-checkbox__input" disabled />
        <span class="mdl-checkbox__label">Caterer</span>
    </label>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" >
        <input type="checkbox"  class="mdl-checkbox__input" disabled/>
        <span class="mdl-checkbox__label">Decorator</span>
    </label>
</div> 

我想将它们呈现为一个水平进度条，如下所示：

​

也许有人可以帮助我的css，因为我不是一个风格专家？一般来说，如何呈现如下图所示的复选框？

Answer 1

​

.mdl-checkbox {
  display: inline-block;
  width: 100px;
  text-align: center;
  padding: 10px;
  position: relative;
  float: left;
}

.mdl-checkbox:after,
.mdl-checkbox:before {
  height: 1px;
  background-color: grey;
  content: "";
  top: 16px;
  position: absolute;
  right:0;
  left:0;
}

.mdl-checkbox:before {
  right: calc(50% + 6px);
}

.mdl-checkbox:after {
  left: calc(50% + 6px);
}

.mdl-checkbox:first-of-type:before {
  display: none;
}

.mdl-checkbox:last-of-type:after {
  display: none;
}

input {
  width:14px;
  height:14px;
  border-width:1px;
  display: block;
  margin: auto;
  position: relative;
}

<div class="myCheck">
    <h5>You have choosen so far</h5>
    <label class="mdl-checkbox mdl-js-checkbox  mdl-js-ripple-effect" >
        <input type="checkbox" [(ngModel)]="hasHall" class="mdl-checkbox__input" disabled />
        <span class="mdl-checkbox__label">Marriage Hall</span> 
    </label>

    <label class="mdl-checkbox mdl-js-checkbox  mdl-js-ripple-effect" >
        <input type="checkbox" [(ngModel)]="hasCaterer" class="mdl-checkbox__input" disabled />
        <span class="mdl-checkbox__label">Caterer</span>
    </label>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" >
        <input type="checkbox"  class="mdl-checkbox__input" disabled/>
        <span class="mdl-checkbox__label">Decorator</span>
    </label>
</div>

​