格式HTML表單

Question

我試圖呈現一個HTML表單是這樣的：http://i.imgur.com/V53sv8F.jpg

我現在面臨的問題是：

1. 我不能使字段去下一行後標籤

2. 我一直沒能得到第一個和最後的firld長度相結合，只要是作爲電子郵件（或密碼）

的

任何幫助非常感謝。

HTML代碼：

<form> 
<label for="Name"><strong> Your Name:</strong></label> 
<input type="text" id="Name_First" name="Name_First" required> 
<input type="text" id="Name_Last" name="Name_Last" required> 

<label for="Email">Email Address:<input type="email" id="Email" name="Email" vrequired></label> 

<label for="RegPassword">Password:<input type="password" id="RegPasswordRegPassword" name="RegPassword" required></label> 
<form>  

JS小提琴鏈接：http://jsfiddle.net/d6a4h9o8/

Answer 1

對於初學者來說是什麼，你的HTML是錯誤的，所以沒有解決方案將工作，如果你不先解決它。因此，讓我們開始認爲：

<form> 
<div class="row"> 
    <label for="Name"><strong> Your Name:</strong></label> 
    <input type="text" id="Name_First" name="Name_First" /> 
    <input type="text" id="Name_Last" name="Name_Last" /> 
    </div> 
    <div class="row"> 
     <label for="Email">Email Address:</label><input type="email" id="Email" name="Email" /> 
    </div> 
    <div class="row"> 
     <label for="RegPassword">Password:</label><input type="password" id="RegPasswordRegPassword" name="RegPassword" /> 
    </div> 
<form>  

現在，我們有適當的標記，並增加了一些的div樣式（注意那些class="row"的div），以幫助我們可以應用CSS是這樣的：

form { 
    background:#ccc; 
    padding:30px; 
    margin:0 auto; 
    width:50% 
} 
form label { 
    display: block; 
} 
input { 
    width:300px; 
} 
.row { 
    width:300px; 
    clear:both; 
    display:block; 
    position:relative; 
    margin:5px auto 
} 
.row:first-child input { 
    width:142px; 
} 
.row:first-child input:last-child { 
    position:absolute; 
    right:-5px; 
    width:144px 
} 

See fiddle看到的結果

現在，有MANY辦法做到這一點，這只是一個，但最重要的是有你的標記固定的，那麼造型真的很容易。

Answer 2

試試這個：

label { 
    display: block; 
    clear: both; 
} 

你仍然需要做更多的造型，當然。

Answer 3

使用

#Name_First { 
    ... 
} 

針對特定的元素與你的CSS樣式。 並試圖通過http://www.htmldog.com/guides/css/beginner/applyingcss/

讀你希望把重點放在應該是「顯示」和「寬度」

Answer 4

下面是與圖片類似的工作示例。

HTML

<form> 
<label for="Name"><strong> Your Name:</strong></label> 
<input type="text" id="Name_First" name="Name_First" required> 
<input type="text" id="Name_Last" name="Name_Last" required> 

<label for="Email">Email Address:</label> 
<input type="email" id="Email" name="Email" vrequired> 

<label for="RegPassword">Password:</label><input type="password" id="RegPassword" name="RegPassword" required> 
<form>  

CSS。

form{ 
    max-width: 500px; 
    background: #d4d4d4; 
    padding: 20px; 
} 

form label {display: block;} 
input{padding: 7px 0;font-size: 25px;} 
input[type="text"]{width:48.2%;} 
input[type="email"],input[type="password"]{width: 98%;} 
}