复选框定位在中心而不是左边

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

应将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>

Answer 2

你要做的是删除复选框的100%宽度和自动边距，最重要的是添加display: inline-block;，以便Remember me文本与复选框

内联

查看下面编辑过的片段!

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

Answer 3

这是因为你的css属性#sign-in-form input{}。你可以这样修改它#sign-in-form input[type="text"]，[type="password"]，[type="submit"]{}。如果你有任何问题，请在评论中问我。：）

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