將複選框對齊到左側

我設計了我的複選框，出於某種原因，我無法將文本左側的框放在頂部。我已經嘗試使用浮動內聯塊沒有任何工作。我能夠將文本浮動的權利，但它把框和文本之間有很大的差距將複選框對齊到左側

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

來源

2017-09-03 Rome

要麼你可以改變你的html markup即加入checkbox, label後.tag和解決容易或使用css left屬性在text之前對齊check-box。

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>

來源

2017-09-03 14:35:38 frnt

將複選框對齊到左側

回答

相關問題