CODEWITHSUNDEEP
htmlcss
William Kinaan
William Kinaan

Reputation: 28819

what is the best practice for aligning html

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/

Upvotes: 0

Views: 935

Answers (4)

Nickolas Tuttle
Nickolas Tuttle

Reputation: 208

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>

Upvotes: 1

Priyank Patel
Priyank Patel

Reputation: 7006

Can you use table , might help your cause , see the example , sorry for not aligning the markup well.

Upvotes: 1

Joseph
Joseph

Reputation: 119867

Make the labels display as block elements. That way, you can set it's width. But you still need them to be inline. You need to apply either float:left, or display:inline-block so they act inline as well as block.

#signup p label{
    display:inline-block;
    width:100px;
}

/*or*/
#signup p label{
    float:left;
    width:100px;
}

If you want to support older browsers, then use the float:left. If you target new browsers, then display:inline-block is better. If you use the float approach, add this to the CSS to clear the float:

#signup p{
    overflow:hidden;
    zoom:1;
}

Upvotes: 4

Paul
Paul

Reputation: 9012

Give the label a definite width, like:

#signup p label{
  padding: 0.4em;
  color: #0986e3;
  width: 100px;
  display: inline-block;
}

Upvotes: 1

Related Questions