グリッド要素を整列/整列する

Question

jsFiddleのように右のチェックボックスに要素のリストを正当化したいと考えています。これを行う方法のベストプラクティスですか？伝統的には、互いにネストされたアイテムをフローティングすることはありませんでしたので、これが正しいかどうかを確認したかったのです。

コード（https://jsfiddle.net/nmLx1ewu/2/）：あなたはfloatを使用せずに簡単にソリューションを使用することができます

.list-group { 
 
    list-style:none; 
 
    margin-right:10px; 
 
} 
 
li { 
 
    width:50%; 
 
    display:inline-block; 
 
    float:left; 
 
} 
 
.items { 
 
    float:right; 
 
}

<ul class="list-group"> 
 
    <li> 
 
    <div class='items'> 
 
     <label>Toggle me</label> 
 
     <input type="checkbox"> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class='items'> 
 
     <label>Longer text </label> 
 
     <input type="checkbox"> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class='items'> 
 
     <label>short</label> 
 
     <input type="checkbox"> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class='items'> 
 
     <label>hi</label> 
 
     <input type="checkbox"> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class='items'> 
 
     <label>more unjustified</label> 
 
     <input type="checkbox"> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 1

。

コード（https://jsfiddle.net/nmLx1ewu/4/）：

.list-group { 
 
    list-style-type:none; 
 
    margin-right:10px; 
 
} 
 

 
li { 
 
    width:calc(50% - 2px); 
 
    display:inline-block; 
 
} 
 
.items { 
 
    text-align:right; 
 
} 
 
.items label, 
 
.items input { 
 
    display:inline-block; 
 
}

<ul class="list-group"> 
 
    <li> 
 
    <div class='items'> 
 
     <label>Toggle me</label> 
 
     <input type="checkbox"> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class='items'> 
 
     <label>Longer text </label> 
 
     <input type="checkbox"> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class='items'> 
 
     <label>short</label> 
 
     <input type="checkbox"> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class='items'> 
 
     <label>hi</label> 
 
     <input type="checkbox"> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class='items'> 
 
     <label>more unjustified</label> 
 
     <input type="checkbox"> 
 
    </div> 
 
    </li> 
 
</ul>