爲複選框旁邊的標籤設置邊距

我想爲我的複選框旁邊的文本設置邊距。在我的HTML看起來它是一行，但在我的網站上，由於字體，它需要兩個（這對我來說非常好）。爲複選框旁邊的標籤設置邊距

無論我做什麼：如果每次都使用填充，邊距或邊框，只有我的文本的第一行稍微向右移動一點，但第二行緊挨着我的複選框。你可以幫幫我嗎？

.contact input { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #ffffff; 
 
    outline: 1px solid #24ba9f; 
 
    float: left; 
 
} 
 
.contact label { 
 
    font-size: 18px; 
 
    text-align: left; 
 
    color: #b2b2b2; 
 
    text-align: left; 
 
    line-height: normal; 
 
    padding-left: 10px; 
 
}

<div class="contact"> 
 
    <label> 
 
    <input type="checkbox" checked>Lorem ipsum, lorem ipsum, lorem ipsum 
 
    </label> 
 
</div>

來源

2016-03-31 ChickenLeg

把'。接觸輸入{保證金權：20px的; }'讓我們完成 –

嘗試這樣的：Demo

你必須把checkbox外標籤，你可以給margin-right的複選框。

更新：Demo

你甚至可以將標籤貼這裏裏面的checkboxmargin right已經與相同的CSS僅指定HTML structure改變

<div class="contact"> 
      <label><input type="checkbox" checked> 
       Lorem ipsum, lorem ipsum, lorem ipsum Lorem ipsum, lorem ipsum, lorem ipsum 
       Lorem ipsum, lorem ipsum, lorem ipsum 
       Lorem ipsum, lorem ipsum, lorem ipsum 
       Lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum 
       </label> 
      </div>

所以輸出會是這樣：

enter image description here

來源

2016-03-31 10:40:00

感謝<3有時候我很累，我沒有看到那些小小的，明顯的東西。 – ChickenLeg

歡迎您..很高興我的回答幫助您:) –

但請記住：如果您將複選框放在標籤之外，您需要使用'for'屬性將標籤和輸入相關聯。 –

在這裏你去

.contact input { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #ffffff; 
 
    outline: 1px solid #24ba9f; 
 
    float: left; 
 
} 
 

 
.contact label { 
 
    font-size: 18px; 
 
    text-align: left; 
 
    color: #b2b2b2; 
 
    text-align: left; 
 
    line-height: normal; 
 
    padding-left: 10px; 
 
} 
 

 
.contact span { 
 
    display:inline-block; 
 
    margin-top:10px; 
 
}

<div class="contact"> 
 
    <label> 
 
    <input type="checkbox" checked> 
 
    <span>Lorem ipsum, lorem ipsum, lorem ipsum</span> 
 
    </label> 
 
</div>

來源

2016-03-31 10:41:15 omarCreativeDev

我希望這個作品

<div class="contact"> 
    <input type="checkbox" id="test" checked/> 
    <label for="test">Lorem ipsum, lorem ipsum, lorem ipsum</label> 
</div> 

.contact input{ 
    width:50px; 
} 
.contact label{ 
    cursor:pointer; 
}

來源

2016-03-31 10:50:31 Cherish

爲複選框旁邊的標籤設置邊距

回答

相關問題