Question

我正在为学校项目做一个登录表单，由于某种原因，我不能在复选框之后放置一个文本而没有任何元素可以移动。我在复选框上尝试了display: inline属性，但仍无效。应该有文字“记住我吗？”在复选框之后。这是演示：http://jsfiddle.net/sa6y8epc/

Answer 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;*/
}

UPDATED FIDDLE

Answer 2

只需调整复选框的大小，例如： G：

Now For sync between Exchange server users and users in DB,

然后，基本上，文本位于复选框的右侧。

演示：JSFiddle

Answer 3

这是一个有效的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;
}

Answer 4

您可以将复选框和文本放在标签元素中（如果单击“记住”文本，也会单击“复选框”）。请使用以下代码。

<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;}

登录表单，复选框后的文本

4 个答案: