對齊複選框及其旁邊的文字

我有一個複選框，並且複選框旁邊的消息已打開。當消息堆疊起來時，我希望消息的第二行與第一行堆疊起來。現在，它與複選框對齊。有沒有辦法可以做到這一點？對齊複選框及其旁邊的文字

HTML

<label for="MailingList" class="MailingList"> 
<input type="checkbox" id="MailingList" name="MailingList">Messsage goes here. Messsage goes here. Messsage goes here. Messsage goes here. Messsage goes here. Messsage goes here. Messsage goes here. Messsage goes here 
</label>

CSS：

.MailingList, 
{ 
margin-left: 10px; 
margin-top: 6px; 
font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica"; 
font-size: 14px; 
color: #666; 
font-style: normal; 
text-align: left; 
line-height: 14.4pt; 
letter-spacing: 0em; 
}

的jsfiddle：http://jsfiddle.net/vc8u1rfr/

有沒有一種辦法可以解決這個問題？任何幫助深表感謝。

編輯

修正的jsfiddle：http://jsfiddle.net/vc8u1rfr/4/

來源

2014-09-22 user3861559

您的JSFiddle無法運行。 – Nicolas 2014-09-22 22:10:28

由於各個元素中未關閉的屬性... – 2014-09-22 22:10:55

我更新了一個固定小提琴 – LcSalazar 2014-09-22 22:11:56

如果設置填充到標籤的左邊，你把所有的文字（與複選框）有點權。現在，如果你拉回來的複選框相同數額與你結束了預期的效果

label { 
 
    display: block; 
 
    padding-left: 20px; 
 
} 
 
    
 
input[type="checkbox"] { 
 
    margin-left: -20px; 
 
}

<label> 
 
    <input type="checkbox" /> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
</label>

來源

2014-09-22 22:13:35

我建議以下CSS陰性切緣：

label { 
    position: relative; 
    display: block; 
    padding-left: 50px; /* or whatever */ 
} 
label :first-child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 10px; /* or whatever */ 
}

JS Fiddle demo 。

來源

2014-09-22 22:13:50

對齊複選框及其旁邊的文字

回答

相關問題