我正在创建一个登录表格，我添加了一个记住我的复选框。出于某种原因，我无法将复选框左对齐。它位于表格的中间。有谁看到我做错了什么？
另外，旁注...为什么我的提交按钮与我的其他输入文本框的大小不同？
#sign-in-form {
width: 400px;
height: auto;
padding: 50px 30px;
margin: auto;
border-radius: 3px;
background: rgba(115,155,175,0.2);
}
#sign-in-form input {
width: 100%;
padding: 8px 6px;
margin: 22px auto;
display: block;
font-size: 1.4em;
border-radius: 3px;
border: none;
}
#sign-in-form input[type="checkbox"] {
padding: 7px;
text-align: left;
}
#sign-in-form input[type="submit"] {
background: #4FCBFE;
color: #FFF;
border: none;
border-radius: 3px;
}<div id="sign-in-form">
<input type="text" name="username" placeholder="User Name" autocomplete="on" required>
<input type="password" name="password" placeholder="Password" autocomplete="off" required>
<label><input type="checkbox" name="remember" id="remember">Remember me</label>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<input type="submit" value="Sign In">
</div>
答案 0 :(得分：1)
您应该将width设置为auto并添加margin-left: 0
#sign-in-form input[type="checkbox"] {
padding: 7px;
text-align: left;
width: auto;
margin-left: 0;
}
这是工作片段。
#sign-in-form {
width: 400px;
height: auto;
padding: 50px 30px;
margin: auto;
border-radius: 3px;
background: rgba(115,155,175,0.2);
}
#sign-in-form input {
width: 100%;
padding: 8px 6px;
margin: 22px auto;
display: block;
font-size: 1.4em;
border-radius: 3px;
border: none;
}
#sign-in-form input[type="checkbox"] {
padding: 7px;
text-align: left;
width: auto;
margin-left: 0;
}
#sign-in-form input[type="submit"] {
background: #4FCBFE;
color: #FFF;
border: none;
border-radius: 3px;
}<div id="sign-in-form">
<input type="text" name="username" placeholder="User Name" autocomplete="on" required>
<input type="password" name="password" placeholder="Password" autocomplete="off" required>
<label><input type="checkbox" name="remember" id="remember">Remember me</label>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<input type="submit" value="Sign In">
</div>
我认为这是您正在寻找的结果：
#sign-in-form {
width: 400px;
height: auto;
padding: 50px 30px;
margin: auto;
border-radius: 3px;
background: rgba(115,155,175,0.2);
}
#sign-in-form input {
width: 100%;
padding: 8px 6px;
margin: 22px auto;
display: block;
font-size: 1.4em;
border-radius: 3px;
border: none;
}
#sign-in-form input[type="checkbox"] {
padding: 7px;
text-align: left;
width: auto;
display: inline-block;
margin: 5px 5px 0 0;
}
#sign-in-form input[type="submit"] {
background: #4FCBFE;
color: #FFF;
border: none;
border-radius: 3px;
}<div id="sign-in-form">
<input type="text" name="username" placeholder="User Name" autocomplete="on" required>
<input type="password" name="password" placeholder="Password" autocomplete="off" required>
<label><input type="checkbox" name="remember" id="remember">Remember me</label>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<input type="submit" value="Sign In">
</div>
答案 1 :(得分：1)
您要做的是从复选框中移除100％宽度以及自动边距，最重要的是添加display: inline-block;，以便记住我文本与复选框
检查下面编辑的代码段！
#sign-in-form {
width: 400px;
height: auto;
padding: 50px 30px;
margin: auto;
border-radius: 3px;
background: rgba(115,155,175,0.2);
}
#sign-in-form input {
width: 100%;
padding: 8px 6px;
margin: 22px auto;
display: block;
font-size: 1.4em;
border-radius: 3px;
border: none;
}
#sign-in-form input[type="checkbox"] {
margin-right: 7px;
text-align: left;
width: auto;
display: inline-block;
}
#sign-in-form input[type="submit"] {
background: #4FCBFE;
color: #FFF;
border: none;
border-radius: 3px;
}<div id="sign-in-form">
<input type="text" name="username" placeholder="User Name" autocomplete="on" required>
<input type="password" name="password" placeholder="Password" autocomplete="off" required>
<label><input type="checkbox" name="remember" id="remember">Remember me</label>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<input type="submit" value="Sign In">
</div>
答案 2 :(得分：1)
It was happen because of you css property #sign-in-form input {}. You can change it like this #sign-in-form input[type="text"],[type="password"],[type="submit"]{} . If you have any question ask me in comment. :)
#sign-in-form {
width: 400px;
height: auto;
padding: 50px 30px;
margin: auto;
border-radius: 3px;
background: rgba(115,155,175,0.2);
}
#sign-in-form input[type="text"],[type="password"],[type="submit"] {
width: 100%;
padding: 8px 6px;
margin: 22px auto;
display: block;
font-size: 1.4em;
border-radius: 3px;
border: none;
}
#sign-in-form input[type="checkbox"] {
/*ADD YOUR CSS FOR CHECK BOX*/
}
#sign-in-form input[type="submit"] {
background: #4FCBFE;
color: #FFF;
border: none;
border-radius: 3px;
}<div id="sign-in-form">
<input type="text" name="username" placeholder="User Name" autocomplete="on" required>
<input type="password" name="password" placeholder="Password" autocomplete="off" required>
<label><input type="checkbox" name="remember" id="remember">Remember me</label>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<input type="submit" value="Sign In">
</div>