Question 217192 in CSS Question posted in
Some basic documentation can be found here.

Css – text input and checkbox input are not being align

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks @GL.awog

    .container input[type="checkbox"]{
    width:auto;
    margin:-2px 5px 0 0;
    display: inline-block;
    vertical-align: middle;
}

    this helped <3


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search