对齐复选框及其旁边的文字

我有一个复选框，并且复选框旁边的消息已打开。当消息堆叠起来时，我希望消息的第二行与第一行堆叠起来。现在，它与复选框对齐。有没有办法可以做到这一点？对齐复选框及其旁边的文字

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

对齐复选框及其旁边的文字

回答

相关问题