チェックボックスを左側に合わせる

Question

私は自分のチェックボックスのスタイルを設定しています。何らかの理由で、テキストの左側にボックスのトップフロートを表示できません。私は浮動小数点型のインラインブロックを試しましたが、何も動作しないようです。私は右にテキストをフロートすることができましたが、それは

.regular-checkbox { 
 
\t display: none; 
 
} 
 

 
.regular-checkbox + label { 
 
\t background-color: #f0f0ee; 
 
\t border: 1px solid #dcdcda; 
 
\t box-shadow: none; 
 
\t padding: 9px; 
 
\t border-radius: 0px; 
 
\t display: inline-block; 
 
\t position: relative; 
 
} 
 

 
.regular-checkbox + label:active, .regular-checkbox:checked + label:active { 
 
\t box-shadow: none; \t 
 
} 
 

 
.regular-checkbox:checked + label { 
 
\t background-color: #f0f0ee; 
 
\t border: 1px solid #dcdcda; 
 
\t box-shadow: none; 
 
\t color: #99a1a7; 
 
} 
 

 
.regular-checkbox:checked + label:after { 
 
\t content: '\2714'; 
 
\t font-size: 15px; 
 
\t position: absolute; 
 
\t top: -4px; 
 
\t left: 3px; 
 
\t color: #99a1a7; 
 
} 
 

 

 
.tag { 
 
\t position: relative; 
 
\t top: 0px; 
 
\t display: block; 
 
\t float: left; 
 
\t font-size: 13px; 
 
\t color: #000; 
 
}

<div class="large-12 columns"> 
 
\t \t <div> 
 
\t \t \t <div class="tag">Box 1</div> 
 
\t \t \t <input type="checkbox" id="checkbox-1-1" class="regular-checkbox"><label for="checkbox-1-1"></label> 
 
\t \t </div> 
 
\t \t <div> 
 
\t \t \t <div class="tag">Box 2</div> 
 
\t \t \t <input type="checkbox" id="checkbox-2-1" class="regular-checkbox"><label for="checkbox-2-1"></label> 
 
\t \t </div> 
 
\t </div>

Answer 1

のどちらかは、あなたがhtml markupすなわちcheckbox, label後.tagを追加変更し、簡単にそれを解決できるボックスとテキストの間の大きなギャップを置きますか、 css leftプロパティを使用してcheck-boxをtextの前に揃えます。

HTMLの変更が

.regular-checkbox { 
 
    display: none; 
 
} 
 

 
.regular-checkbox + label { 
 
    background-color: #f0f0ee; 
 
    border: 1px solid #dcdcda; 
 
    box-shadow: none; 
 
    padding: 9px; 
 
    border-radius: 0px; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.regular-checkbox + label:active, 
 
.regular-checkbox:checked + label:active { 
 
    box-shadow: none; 
 
} 
 

 
.regular-checkbox:checked + label { 
 
    background-color: #f0f0ee; 
 
    border: 1px solid #dcdcda; 
 
    box-shadow: none; 
 
    color: #99a1a7; 
 
} 
 

 
.regular-checkbox:checked + label:after { 
 
    content: '\2714'; 
 
    font-size: 15px; 
 
    position: absolute; 
 
    top: -4px; 
 
    left: 3px; 
 
    color: #99a1a7; 
 
} 
 

 
.tag { 
 
    position: relative; 
 
    top: 0px; 
 
    display: inline-block; 
 
    font-size: 13px; 
 
    color: #000; 
 
    vertical-align: top; 
 
}

<div class="large-12 columns"> 
 
    <div> 
 
    <input type="checkbox" id="checkbox-1-1" class="regular-checkbox"> 
 
    <label for="checkbox-1-1"></label> 
 
     <div class="tag">Box 1</div> 
 
    </div> 
 
    <div> 
 
    <input type="checkbox" id="checkbox-2-1" class="regular-checkbox"> 
 
    <label for="checkbox-2-1"></label> 
 
    <div class="tag">Box 2</div> 
 
    </div> 
 
</div>

この CSS leftプロパティを使用して、などの可能性があります。

.regular-checkbox { 
 
    display: none; 
 
} 
 

 
.regular-checkbox + label { 
 
    background-color: #f0f0ee; 
 
    border: 1px solid #dcdcda; 
 
    box-shadow: none; 
 
    padding: 9px; 
 
    border-radius: 0px; 
 
    display: inline-block; 
 
    position: relative; 
 
    left: -30px; 
 
} 
 

 
.regular-checkbox + label:active, 
 
.regular-checkbox:checked + label:active { 
 
    box-shadow: none; 
 
} 
 

 
.regular-checkbox:checked + label { 
 
    background-color: #f0f0ee; 
 
    border: 1px solid #dcdcda; 
 
    box-shadow: none; 
 
    color: #99a1a7; 
 
} 
 

 
.regular-checkbox:checked + label:after { 
 
    content: '\2714'; 
 
    font-size: 15px; 
 
    position: absolute; 
 
    top: -4px; 
 
    left: 3px; 
 
    color: #99a1a7; 
 
} 
 

 
.tag { 
 
    position: relative; 
 
    top: 0px; 
 
    display: block; 
 
    float: left; 
 
    font-size: 13px; 
 
    color: #000; 
 
    left: 25px; 
 
}

<div class="large-12 columns"> 
 
    <div> 
 
    <div class="tag">Box 1</div> 
 
    <input type="checkbox" id="checkbox-1-1" class="regular-checkbox"> 
 
    <label for="checkbox-1-1"></label> 
 
    </div> 
 
    <div> 
 
    <div class="tag">Box 2</div> 
 
    <input type="checkbox" id="checkbox-2-1" class="regular-checkbox"> 
 
    <label for="checkbox-2-1"></label> 
 
    </div> 
 
</div>