Becky Becky - 1 month ago 13
HTML Question

Checkbox positioning center instead of left

I am creating a sign in form and I added a remember me checkbox. For some reason I cannot get the checkbox to align left. It is centering in the middle of the form. Does anyone see what I am doing wrong?

Also, side note...why is my submit button not the same size as my other input text boxes?



#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

You should set the width to auto and add margin-left: 0

#sign-in-form input[type="checkbox"] {
    padding: 7px;
    text-align: left;
    width: auto;
    margin-left: 0;
}

Here is the working snippet.

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

I think this is the result you are looking for:

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