如何禁用文本包围复选框 [英] how to disable text wrapping around checkbox
本文介绍了如何禁用文本包围复选框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何防止文字绕回复选框?我需要对齐复选框后的文本,而不是它下面。我知道我不是第一个要问的人,但我似乎找不到解决方案。
how can I prevent the text from wrapping around the checkbox? I need to align the text after the checkbox, and not under it. I know I'm not the first person to ask, but I cant seem to find a solution.
.sign-newsletter {
padding:40px;
width:200px;
}
form li {display:inline;}
fieldset {border:0;}
.checkbox {
width: 13px;
height: 13px;
padding: 0;
margin:0 10px 0 0;
vertical-align: bottom;
position: relative;
top: -2px;
*overflow: hidden;
}
input {background:#636566; padding:7px;
width:100%;
margin-bottom:5px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
<div class="sign-newsletter">
<form method="post" action="submit-sign-newsletter.php">
<fieldset>
<ul>
<li><input type="text" name="name" placeholder="Name" /></li>
<li><input type="email" name="email" placeholder="Email" /></li>
<li><input class="checkbox" type="checkbox" name="sign_me_in" value="" /><label>"Lorem ipsum dolor sit amet, consectetur </label></li>
<li><input type="submit" value="Submit" class="button" /></li>
</ul>
</fieldset>
</form>
</div>
推荐答案
尝试更改:
HTML p>
HTML
<li>
<div class="chkLabel">
<input class="checkbox" type="checkbox" name="sign_me_in" value="" />
<label>"Lorem ipsum dolor sit amet, consectetur</label>
</div>
</li>
CSS
.chkLabel input { float: left; margin-top:0.5em;}
.chkLabel label { display: block; margin-left: 1.5em;}
这篇关于如何禁用文本包围复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文