水平顯示HTML表單輸入

Question

我想重新創建在tinypic主頁上顯示的登錄表單。

在HTML

，我有3個elemnts這樣的：

E-Mail: 
<input type="text" name="id" maxlength="30" value="" /> 
Password: 
<input type="text" name="pw" maxlength="30" value="" /> 

<input type="submit" name="submit" value="Login" /> 

我試圖把它們放在不同的div，使用 浮動：左有一類獨特的CSS 但代碼實在太雜亂無理。 所以基本上，我想知道是否有一個簡單的方法來實現這種佈局與HTML和CSS。

感謝您的時間！

Answer 1

這個CSS應該工作，雖然我沒有測試：

input { display: inline; } 

Answer 2

只需添加display:inline您輸入元素，如圖here

Answer 3

這裏是我的解決方案：（http://jsfiddle.net/HcppN/）

HTML：

<label>E-Mail:</label> 
<input type="text" name="id" maxlength="30" value="" /> 
<label>Password:</label> 
<input type="text" name="pw" maxlength="30" value="" /> 

<input type="submit" name="submit" value="Login" /> 

CSS：

input, label { 
    float:left; 
    margin:5px; 
} 

我還建議您將標籤封裝在<label>標籤中。您甚至可以使用for="inputId"屬性，以便點擊標籤將輸入引入焦點。