我有一个复选框,复选框旁边的消息是 ong。当消息堆叠起来时,我希望消息的第二行与第一行堆叠在一起。现在,它与复选框对齐。有什么办法可以做到吗?
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/
最佳答案
如果您在标签的左侧设置一个填充,您会将所有文本(和复选框)向右推一点。现在,如果您以负边距拉回相同数量的复选框,您最终会获得所需的效果
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>
关于css - 对齐复选框和旁边的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25983812/