我怎樣才能內聯標籤與輸入水平和輸入垂直

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修理路線。

我希望它能幫助。