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 assign CSS to mobile page in asp.net

    How to make first page fullscreen and others not [closed]

    How do I get one element to respond to the click of another element? - CSS/jQuery

    How to Dynamically Fit image in screen using css

    How to make CSS border show on radio button click

    How to center field_with_errors class

    how to prevent css inherit?

    CSS: how to add white space before element's content?

    How do I apply css to second level menu items?

    how i can make slideshow, get information(image, title , content) from database? [closed]

    How do I add a mouseover drop shadow effect for circular images?

    How to test css with media queries

    CSS: How to get position and size relative to screen width?

    Foundation 6: How to set .is-open-right translateX value with JavaScript

    How to locate a list of webelement using Css selector in C#

    how to vertically align the 2 different font sizes inside a single

    Showing :before but hiding element with CSS only

    How to apply css to only one level of list items (not to child elements)

    CSS Image size, how to fill, not stretch?

    how to change the CSS background-image of a class-pseudoelement by Javascript only?

    How to add hover class to jQuery click(function() accordian divs?

    How to set background color based on YAML front matter (Jekyll)

    How to change column display order mobile/tablet view CSS Wordpress?

    How to Centre a Page Layout With HTML/CSS?

    How to set link on image using maplink in responsive theme?

    How do I get this menu to stay top right of the image on hover? - CSS, jQuery

    How to make form line up?

    CSS, how to size an img back to its width attribute

    How to add classes to div using jquery in sequence like animation

    How do you toggle links to stay a certain color until clicked again