Выравнивание флажка и текста рядом с ним
У меня есть флажок, и сообщение рядом с ним-ong. Когда сообщение складывается, я хочу, чтобы 2-я строка сообщения складывалась с первой строкой. Прямо сейчас он выравнивается с флажком. Есть ли способ сделать это?
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/
Есть ли способ, которым я могу это исправить? Любая помощь очень ценится.EDIT
Исправлено JsFiddle: http://jsfiddle.net/vc8u1rfr/4/
2 ответа:
Если вы установите отступ слева от метки, вы сдвинете весь текст (и флажок) немного вправо. Теперь, если вы отодвинете флажок на ту же сумму с отрицательным запасом, вы получите желаемый эффект
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>