样式复选框水平像进度条

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> 

我想将它们像水平进度条一样渲染，如下所示：

因为我不是造型专家，所以有人可能会帮我解决问题吗？一般来说，如何在这个插图中渲染复选框？

Answer 1

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;