スタイルチェックボックスは横方向に進捗バーのように表示されます

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>