格式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%;} 
}