I was trying to create a form. so, i put some text input field and checkbox field. but it seems text fields and checkbox feilds are not aligned to each other.
i tried some online resources but in vain.
This is my HTML part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h3>WELCOME TO DIU QUIZ HUB</h3>
<form action="index.php" method="post">
<input type="text" name="name" id="name" placeholder="Enter Your Name">
<input type="text" name="student_id" id="student_id" placeholder="Enter Your Student ID number">
<input type="email" name="email" id="email" placeholder="Enter Your edu mail">
<input type="password" name="password" id="password" placeholder="Enter Your Password">
<textarea name="reason" id="reason" cols="30" rows="10" placeholder="Why you want to join?"></textarea>
<input type="checkbox" name="check_box" id="check_box">Check me
<br>
<button class="btn">Submit</button>
</form>
</div>
<script src="index.js"></script>
</body>
</html>
This is my CSS part:
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container{
max-width: 80%;
background-color: rgb(19, 131, 206);
padding: 34px;
margin: auto;
}
.container h3{
text-align: center;
}
input, textarea{
width: 80%;
display: block;
margin-bottom: 10px;
}
.container input[type="checkbox"]{
display: inline-block;
vertical-align: middle;
}
I am new to dev and to stackOverflow too.
>Solution :
You have set the width – 80% for all inputs, including checkbox. So additionally you need to stylise the checkbox like that:
input[type="checkbox"] {
width:auto;
margin:-2px 5px 0 0;
}
Thus you’ll reset its width and add some helpful margins