CODEWITHSUNDEEP
csshtml
Brained Washed
Brained Washed

Reputation: 703

How can I inline the label with the input horizontally and the inputs vertically

My problem is that I cannot inline the label with the input horizontally and the inputs vertically

I wish to have an output like this:

enter image description here

But I'm using a table on this. Now I want not to use table but I dont know how to do it. I try to make but it is very wrong.

Here's my css

   article#login, article#register {
    padding:5px 0 5px;
    border:1px solid black;
    width:200px;
    margin:0 auto;
}

And here's my html

<section id="siteContent" class="tabs">
    <h1>Section</h1>
    <article id="login">
        <h1>Login</h1>
        <label>E-mail:</label>
        <input type="email">
        <label>Password:</label>
        <input type="password">
        <input type="button" value="Login">
    </article>
    <article id="register">
        <h1>Register</h1>
        <label>Name:</label>
        <input type="text">
        <label>E-mail:</label>
        <input type="email">
        <label>Password:</label>
        <input type="password">
        <label>Re-type:</label>
        <input type="password">
    </article>
</section>

Upvotes: 1

Views: 153

Answers (2)

Daedalus
Daedalus

Reputation: 7722

As far as I am aware, there is no true way to achieve horizontal and vertical alignment without a table.(I was just proven wrong by @TimMedora) However, if you want your input boxes to appear on the same line as the label, you're going to want to adjust their size. They are currently larger than your box, and thus get pushed around by the other elements. Once you do this however, you'll still want to apply the following css(or something similar) so your elements stay on their individual lines:

label {
    display: inline-block;
}

DEMO

Upvotes: 2

Priyank Patel
Priyank Patel

Reputation: 6996

Why not just wrap your label and input inside a p tag like this

<article id="login">
        <h1>Login</h1>
    <p>
        <label>E-mail:</label>
        <input type="email">
    </p>

    <p>   
        <label>Password:</label>
        <input type="password">
    </p>       
        <input type="button" value="Login">
    </article>​

And then using CSS fix the alignment.

See Demo

I hope it helps.

Upvotes: 1

Related Questions