Home/ Questions/Q 7942863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T00:06:06+00:00

html code <div id="signup"> <p> <label>Frist Name</label> <input type="text"/> <p> <p> <label>Last Name</label> <input

  • 0

html code

<div id="signup">
    <p>
        <label>Frist Name</label>
        <input type="text"/>
    <p>
    <p>
        <label>Last Name</label>
        <input type="text"/>
    <p>
    <p>
        <label>Email</label>
        <input type="text"/>
    <p>
    <p>
        <label>Mobile Number</label>
        <input type="text"/>
    <p>
    <p>
        <label>Password</label>
        <input type="password"/>
    <p>
    <p>
        <label>Re Password</label>
        <input type="password"/>
    <p>
</div>

and this is css

css

#signup{
    width: 860px;
    background-color: white;
    border:  1px black solid;
    padding: 0px;
    margin: 0px;
}
#signup p label{
    padding: 0.4em;
    color: #0986e3;
}
#signup p input{
    width: 300px;
    padding: 0.4em;
}

if u run this code u will see the input files right and left , and that is not good , i can correct this problems using div or li , but i want the best practice for doing that , i want the input filds to be exaclty below each other
,this is the code in jsfiddle
http://jsfiddle.net/Wiliam_Kinaan/EfBD7/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here, I did it how I would do it. I stripped out the p and some css to make text right side. but you can of course add display:inline-block;width:300px; to the label and swap the label and input locations in html

    <!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
    width: 500px;
    background-color: #ececec;
    border:  1px black solid;
    padding: 0px;
    margin: 0px;
}
#signup label{
    font:12px arial;
    color: #0986e3;
}
#signup input{
    margin:10px;
    width: 300px;
    padding 0.4em;
}
#signup input[type=button]{
    margin:10px;
    width: 80px;
    padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
    <input type="text"/>
    <label>Frist Name</label>
    <input type="text"/>
    <label>Last Name</label>
    <input type="text"/>
    <label>Email</label>
    <input type="text"/>
    <label>Mobile Number</label>
    <input type="password"/>
    <label>Password</label>
    <input type="password"/>
    <label>Re Password</label>
    <input type="button" value="click me!" />
</div>

</body>
</html>
    • 0