css - 如何将标签与水平输入和垂直输入内联

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;
}

演示

Answer 2

为什么不把你的labeland包裹在这样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修复对齐。

看演示

我希望它有所帮助。