html - 复选框定位中心而不是左侧

Question

我正在创建一个登录表单并添加了一个记住我的复选框。出于某种原因，我无法让复选框左对齐。它在表格的中间居中。有人看到我做错了什么吗？

另外，旁注...为什么我的提交按钮与其他输入文本框的大小不一样？

#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>

Answer 1

您应该将宽度设置为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>