如何在水平输入和垂直输入的情况下内联标签

Question

我的问题是我不能用水平输入和垂直输入

来内联标签

我希望得到这样的输出：

但我正在使用一张桌子。现在我不想使用表，但我不知道该怎么做。我尝试制作，但这是非常错误的。

这是我的CSS

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

这是我的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>

Answer 1

据我所知，没有真正的方法可以在没有表格的情况下实现水平和垂直对齐。（我刚被@TimMedora证明是错误的）但是，如果你想要你的输入框要与标签显示在同一行，您需要调整其大小。它们目前比你的盒子大，因此被其他元素推动。但是，一旦你这样做了，你仍然会想要应用下面的css（或类似的东西），这样你的元素就会保留在它们的各个方面：

label {
    display: inline-block;
}

DEMO

Answer 2

为什么不将label和input包裹在p这样的标签中

<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>​

然后使用CSS修复对齐。

<强> See Demo

我希望它有所帮助。