我正在为学校项目做一个登录表单,由于某种原因,我不能在复选框之后放置一个文本而没有任何元素可以移动。我在复选框上尝试了display: inline
属性,但仍无效。应该有文字“记住我吗?”在复选框之后。这是演示:http://jsfiddle.net/sa6y8epc/
答案 0 :(得分:1)
使用.login-div input
设置的规则也适用于复选框。更改该内容,然后从float: left
#checkbox
.login-div input[type=text],
.login-div input[type=password] {
display: block;
margin-top: 10px;
border: 1px solid #b3b3b3;
border-radius: 2px;
width: 245px;
height: 22px;
padding: 2px;
padding-left: 8px;
}
#checkbox {
/*float: left;*/
}
答案 1 :(得分:1)
只需调整复选框的大小,例如: G:
Now For sync between Exchange server users and users in DB,
然后,基本上,文本位于复选框的右侧。
演示:JSFiddle
答案 2 :(得分:1)
这是一个有效的jsfiddle:https://dev.mysql.com/doc/refman/5.6/en/create-table-foreign-keys.html
首先在复选框后面添加一个标签:
<label for="checkbox" id="checkbox-label">Remember me?</label>
然后添加这个CSS:
.login-div {
text-align: center;
}
#checkbox {
float: none;
width: auto;
display: inline-block;
}
#checkbox-label {
font-size:12px;
display: inline-block;
vertical-align: top;
margin-top: 13px;
color: #fff;
}
答案 3 :(得分:1)
您可以将复选框和文本放在标签元素中(如果单击“记住”文本,也会单击“复选框”)。请使用以下代码。
<label id="lbl-chkbx"><input type="checkbox" name="radio" id="checkbox"> Remember me </label>
input[type=checkbox]{ width: auto; height: auto;}
#lbl-chkbx{ vertical-align:-webkit-baseline-middle;}