Question

我有一个复选框，复选框旁边的消息是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/

Answer 1

如果在标签的左侧设置填充，则将所有文本（和复选框）向右推一点。现在，如果您将具有负余量的相同数量的复选框拉回，则最终会产生所需的效果

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>

Answer 2

我建议使用以下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

对齐复选框和旁边的文本

2 个答案: