css - 像进度条一样水平设置复选框样式

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>