facing difficulties in the alignment of text in html

Question

.box{
        margin: 0 auto; 
        width:400px //you can set it in %.
        height: 600px;
        padding:20px;
        background:#f9f9f9;
        border:4px solid #333;
    }



  
    
    Forms
  
  

      
        
          
          Form Updation

          

            First name : 


            Last name : 


            Password : 


            Nationalaity : 



            Phone Number :

output - [Phone number is not in proper arrangemnt with the above one i need to come with phone number in arrangement like all in centre and onething is that i want these 5 should come up with by another eans there is some space which is left out in other work all the fillup section must come with space index.]

user_14556413 · Answer

It's hard to get what you want but i guess your question is how can I align texts and inputs in a nice order.

So we can think a way to do that in your code.

Firstly think your text and input parts as an one. We can take the text in a div and give that a width like 50% or 33%. After that we can define another div for input and give it the remaining width or directly give the remaining width to input.

Up to now

*{
  box-sizing:border-box;
}
#form{
  width:50%
}
#form div,
#form input{
  display:inline-block;
}
#form div{
  width:35%;
}
#form input{
  width:65%;
}



        First name : 



        Last name : 



        Password : 



        Nationalaity : 



        Phone Number :

But don't forget to make your components box-sizing to border-box. If you don't when you give to 33% and 66% width or anything that sums 100% won't work as side by side. Your input will get new line.So we give our form a width that we want, after that we made our input and div inline-block to get side by side nad then give the widths. If you want to center your text you can add text-align:left to your divs.

#form div{
  width:35%;
  text-align:left;
}

#form represent our form with it's id that we gave, #form div represent the divs that inside that form( you can check combinators) and so on. Here is a link for combinators either.

Combinators in CSS

facing difficulties in the alignment of text in html

1 Answers