Question

我正在尝试渲染这样的html表单：http://i.imgur.com/V53sv8F.jpg

我面临的问题是：

我无法将字段放在标签
我无法将第一个和最后一个的长度合并为电子邮件（或密码）的长度

非常感谢任何帮助。

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

这是与图片类似的工作示例。

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

Answer 3

试试这个：

label {
    display: block;
    clear: both;
}

当然，你还需要做额外的造型。

Answer 4

使用

#Name_First {
   ...
}

使用css样式定位特定元素。并尝试阅读http://www.htmldog.com/guides/css/beginner/applyingcss/

你想要关注的应该是＆＃34;显示＆＃34;和＆＃34;宽度＆＃34;

格式化html表单

4 个答案: