I have aligned all the other inputs in my form to the left side and i want to do the same with my radio buttons and check boxes. I am not understanding why they are centered since i don’t think I have mentioned center alignment anywhere.
I have tried using float:left and flexbox but it did not work. It also messed up the alignment further. Please help me to align the radio buttons and checkboxes to look like this:
enter image description here
My output currently looks like this:
enter image description here
HTML CODE:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration Form</title>
<link rel="stylesheet" href="/forms/styles.css" />
</head>
<body>
<div>
<h1>Maths Tuition Registration Form</h1>
<form action="">
<div class="section">
<label for="name">Name</label> <br />
<input type="text" placeholder="Enter your first name" />
<input type="text" placeholder="Enter your last name" />
</div>
<br />
<div class="section">
<label for="email">Email</label> <br />
<input type="text" placeholder="Enter your Email id" />
</div>
<div class="section">
<label for="gender">Gender</label> <br />
<ul type="none">
<li class="gender-span">
<input type="radio" id="male" name="gender" />
<label for="male" class="gender-label">Male</label>
</li>
<br />
<li class="gender-span">
<input type="radio" id="female" name="gender" />
<label for="female" class="gender-label">Female</label>
</li>
</ul>
</div>
<br />
<div class="section">
<label for="password">Password</label> <br />
<input type="password" placeholder="Enter your password" />
<input type="password" placeholder="Confirm your password" />
</div>
<div class="section" id="Courses">
<label for="">Courses</label><br />
<div class="checkbox-wrapper">
<input type="checkbox" id="algebra" />
<label for="algebra" class="checkbox-label">Algebra</label>
<input type="checkbox" id="geometry" />
<label for="geometry" class="checkbox-label">Geometry</label>
<input type="checkbox" id="trignometry" />
<label for="trignometry" class="checkbox-label">Trigonometry</label>
<input type="checkbox" id="calculus" />
<label for="calculus" class="checkbox-label">Calculus</label>
</div>
</div>
</form>
</div>
</body>
CSS CODE:
body {
background-color: #000000;
color: #FFFFFF;
}
div {
background-color: #282A3A;
margin-top: 50px;
margin-left: 70px;
margin-right: 70px;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #C69749;
}
label {
color: #C69749;
}
input {
background-color: #1C1E2C;
color: #C69749;
margin: 10px;
padding: 10px;
width: 50%;
}
::placeholder {
color: #C69749;
opacity: 0.7;
}
.section {
margin: 0.01px;
}
.gender-label {
margin-left: 5px;
display: inline-block;
}
span {
float: left;
}
.divcheck {
float: left;
margin-right: 0px; /* Added margin to separate checkboxes */
}
.checkbox {
display: inline-block;
/* float: left; */
}
New contributor
Julia_Argent is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.