Making line one and the next line parallel-CodePudding

sorry if my question title is not understand able, i am not good in english. so i want to make a log in page in website. i already make the box with email and password input, so users can fill the blanks. but the output like this :

Email :

Password :

i want both colon to be straight each other like parallel.

thanks for anyone that help me. this is the code.

<!DOCTYPE HTML>
<html>
    <head>
        <title>M-Shop&reg</title>   
        <style>
            #login{
                background-color:white;
                width:300px;
                height:300px;
                border:solid black 2px;
                overflow:hidden;
                position:relative;
                left:40%;
            }
            #tombollog{
                position:relative;
                left:40%;
                top:20%;
            }
            #lupa{
                position:relative;
                left:15%;
                top:30%;
            }
            #email(
                position:relative;
                left:50%;
            )
                
        </style>
    </head>
    <body>
        <div id="login">
            <p style="text-align:center;">Log in</p>
            <p style="text-align:center;"> M-Shop&reg </p>
            <p id="email">Email    :<input type="text"></p>
            <p>Password :<input type="text"></p>
            <a id="tombollog" href="">Log in</a>
            <a id="lupa" href="">Lupa Password ?</a>
        </div>
            
            
            
        
    </body>
</html>

CodePudding user response：

To create extra spaces before, after, or in-between your text, use the   or   (non-breaking space) extended HTML character.

And you can also use the additional HTML entities &ensp; and &emsp; to add two and four non-breaking spaces respectively.

The below code will be helpful for you.

<!DOCTYPE HTML>
<html>

<head>
  <title>M-Shop&reg</title>
  <style>
    #login {
      background-color: white;
      width: 300px;
      height: 300px;
      border: solid black 2px;
      overflow: hidden;
      position: relative;
      left: 40%;
    }
    
    #tombollog {
      position: relative;
      left: 40%;
      top: 20%;
    }
    
    #lupa {
      position: relative;
      left: 15%;
      top: 30%;
    }
    
    #email {
      position: relative;
      left: 50%;
    }
  </style>
</head>

<body>
  <div id="login">
    <p style="text-align:center;">Log in</p>
    <p style="text-align:center;"> M-Shop&reg </p>
    <p id="email">Email &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <input type="text"></p>
    <p>Password : <input type="text"></p>
    <a id="tombollog" href="">Log in</a>
    <a id="lupa" href="">Lupa Password ?</a>
  </div>




</body>

</html>

CodePudding user response：

Explanations below followed by new code with /* comments */

You'll want to wrap the Email and Password sections with a <div> as I have below (and you can ID or class this however you like - I chose a class of "parallel"

The magic CSS you will want to use is display: flex; To center items with flex, use justify-content: center;...alternatively, justify-content: space-around will create some pleasant spacing. If you do choose CENTER, consider adding gap: 12px with an amount of space that feels right.

I widened the box to fit the content a little better as well.

Also, you may want to remove static positioning such as top or left and use something like margin-inline: auto to center items in their space. NOTE: this won't work with display: flex.

Another note - careful! You've got parentheses wrapping your #email CSS block. Make sure you're using { curly braces }

See my modifications to your code below (feel free to copy and use it)

<!DOCTYPE html>
<html>
  <head>
    <title>M-Shop&reg</title>
    <style>
      #login {
        background-color: white;
        width: 600px; /* widened to fit the content */
        height: 300px;
        border: solid black 2px;
        overflow: hidden;
        position: relative;
        /* left:40%; remove this and instead use margin-inline*/
        margin-inline: auto; /* this will PROPERLY center the box */
      }
      #tombollog {
        position: relative;
        left: 40%;
        top: 20%;
      }

      #lupa {
        position: relative;
        left: 15%;
        top: 30%;
      }

      /* make sure this is curly braces - you had parentheses */
      #email {
        position: relative;
        /* left: 50%; perhaps remove this style */
      }

      .parallel {
          display: flex; /* this will make them parallel*/
          justify-content: center; /*center the content with */
          gap: 12px; /* adds a gap - feel free to change the value*/
        }
    </style>
  </head>
  <body>
    <div id="login">
      <p style="text-align: center">Log in</p>
      <p style="text-align: center">M-Shop&reg</p>
      <div >
        <p id="email">Email :<input type="text" /></p>
        <p>Password :<input type="text" /></p>
      </div>
      <a id="tombollog" href="">Log in</a>
      <a id="lupa" href="">Lupa Password ?</a>
    </div>
  </body>
</html>

Result:

what my version of the code is rendering in Chrome