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


Tags: html,css,html5

Problem :

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>


Solution :

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


    CSS Howto..

    How to find everything that is not matching a regular expression

    How would you code this: The SO Announcement bar [closed]

    How to create a 3 column (ul, li) header that (responsive) collapse one below another?

    How to make the submenu to be at the same horizontal as its parent's menu with this css?

    how to force page break between absolutely positioned elements in css

    How to replace a text-align: -webkit-center?

    How to make jQuery UI nav menu horizontal?

    Javascript - How to get all matching classes and selector from css files for an element [duplicate]

    How to select with css specific id only if have specific class on same div?

    CSS: How to float:right and center

    How can I modify left property after hide an element using JQuery?

    All sections show over fixed header when scrolling

    How to change the background color of the heading from transparent to paint white?

    How to dynamically create CSS class in JavaScript and apply?

    How to debug IE print problem

    How to write a:visited in inline CSS?

    How to apply CSS to td of particular table using Classname? [duplicate]

    Background images: how to fill whole div if image is small and vice versa

    How to reflow DIV boxes in CSS to stick to bottom right?

    how would I use Javascript, html and css to produce the running tiger effect seen in run4tigers website? [closed]

    How to make the background DIV only transparent using CSS

    How do I change the colour of 'and one other person like this' when I've added it to my site?

    How to fix header cannot sticky in wordpress?

    How to animate the movement of inline-block items on page resize (ideally using css)?

    how to apply css on specific td on first tr

    Magento - how to locate the location of inline css

    how i can show the image in middle of div i want using CSS

    how to use linked animated css?

    How to slide a div with p tag to right with css animation usin max-width?

    How are table cell widths calculated in html?