Question 171914 in Html Question posted in
Some basic documentation can be found here.

Why are input boxes on the same line in HTML?

I Have been learning HTML and CSS for 2 days now so the code is probably sloppy but does anyone know why the input boxes aren’t on separate lines even though they are in different divs

I have a different code where they are in separate lines and almost copied it to a T but the problem is still occurring. The first text is my HTML and my second text is the CSS. The image is the output, also this is my first post so sorry if I did anything wrong
outcome

*{
    margin: 0;
    padding: 0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background:linear-gradient(to bottom, purple, rgb(0, 183, 255));
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.glass{
    height: 550px;
    width: 400px;
    border: 3px solid;
    background-color: rgba(38, 38, 38,1);
    border-radius: 10%;
    box-shadow: 10px 45px 100px black;
}

form{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    transform: scale(1.5,1.5);
}

input{
    border: none;
    background: none;
    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="glass"></div>

    <form action="results.html" method="GET">

        <div class="email">
            <label for="email"></label>
            <input type="email" name="email" id="email" required placeholder="Email">
        </div>

        <div class="pass">
            <label for="password"></label>
            <input type="password" name="password" id="password" required placeholder="Password">
        </div>
    </form>

</body>
</html>
Tags:

2

Answers


  1. 0

    Flex defaults to direction row, you’ll need flex-direction: column to make them on 2 lines.

    Also, the transform: scale(1.5,1.5) on the form causes the element to grow over his parent.

    If you’re trying to enlarge the text, use font-size, scale is not needed here.

    *{
    margin: 0;
    padding: 0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background:linear-gradient(to bottom, purple, rgb(0, 183, 255));
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.glass{
    height: 550px;
    width: 400px;
    border: 3px solid;
    background-color: rgba(38, 38, 38,1);
    border-radius: 10%;
    box-shadow: 10px 45px 100px black;
}

form{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: absolute;
    /* transform: scale(1.5,1.5); */
}

input{
    border: none;
    background: none;
    
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="glass"></div>

    <form action="results.html" method="GET">

        <div class="email">
            <label for="email"></label>
            <input type="email" name="email" id="email" required placeholder="Email">
        </div>

        <div class="pass">
            <label for="password"></label>
            <input type="password" name="password" id="password" required placeholder="Password">
        </div>
    </form>

</body>
</html>
    Login or Signup to reply.
  2. 0 
    Heyy..you just used display flex in form tag which overrides the property of div inside form from block to inline..i had fixed it for you..

     *{
    margin: 0;
    padding: 0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background:linear-gradient(to bottom, purple, rgb(0, 183, 255));
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.glass{
    height: 550px;
    width: 400px;
    border: 3px solid;
    background-color: rgba(38, 38, 38,1);
    border-radius: 10%;
    box-shadow: 10px 45px 100px black;
}

form{
    position: absolute;
    transform: scale(1.5,1.5);
}

input{
    border: none;
    background: white;
    margin-top:10px;

}
.label{
    color: white;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="glass"></div>

    <form action="results.html" method="GET">

        <div class="email">
            <label for="email" class="label">Email:</label>
            <input type="email" name="email" id="email" required placeholder="Email">
        </div>

        <div class="pass">
            <label for="password" class="label">Password:</label>
            <input type="password" name="password" id="password" required placeholder="Password">
        </div>
    </form>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search