如何在HTML中alignmentinput表单
我是HTML新手，我正在尝试学习如何使用表单。
我目前所面临的最大问题是调整表格。 这是我目前的HTML文件的一个例子：
<form> First Name:<input type="text" name="first"><br /> Last Name:<input type="text" name="last"><br /> Email:<input type="text" name="email"><br /> </form> 问题在于，“电子邮件”之后的字段框与第一个和最后一个名字相比，间距方面有很大的不同。 什么是“正确”的方式来使它们基本上“组合”？
我正在努力练习良好的forms和语法…很多人可能用CSS做这个我不确定，至今我只学习了HTML的基本知识。
另一个例子，这使用CSS，我只是把表单放在与容器类的div。 并且指定包含在其中的input元素应该是容器宽度的100％，并且不在任何一方具有任何元素。
<html> <head> <title>Example form</title> <style type="text/css"> .container { width: 500px; clear: both; } .container input { width: 100%; clear: both; } </style> </head> <body> <div class="container"> <form> <label>First Name</label> <input type="text" name="first"><br /> <label>Last Name</label> <input type="text" name="last"><br /> <label>Email</label> <input type="text" name="email"><br /> </form> </div> </body> </html>
接受的答案（以像素为单位设置明确的宽度）使得难以进行更改，并在用户使用不同的字体大小时中断。 另一方面，使用CSS表格很有效：
CSS
form { display: table; } p { display: table-row; } label { display: table-cell; } input { display: table-cell; }
HTML
<form> <p> <label for="a">Short label:</label> <input id="a" type="text"> </p> <p> <label for="b">Very very very long label:</label> <input id="b" type="text"> </p> </form>
这里是一个JSFiddle： http : //jsfiddle.net/DaS39/1/
如果你需要标签右alignment，只需添加text-align: right标签的text-align: right ： http : //jsfiddle.net/DaS39/
编辑：另一个快速注意：CSS表也让你玩列：例如，如果你想使input字段占用尽可能多的空间，你可以在你的表单中添加以下内容
<div style="display: table-column;"></div> <div style="display: table-column; width:100%;"></div>
在这种情况下，您可能需要将white-space: nowrap添加到labels 。
如果您是HTML的新手，简单的解决scheme就是使用表格来排列所有内容。
<form> <table> <tr> <td align="right">First Name:</td> <td align="left"><input type="text" name="first" /></td> </tr> <tr> <td align="right">Last Name:</td> <td align="left"><input type="text" name="last" /></td> </tr> <tr> <td align="right">Email:</td> <td align="left"><input type="text" name="email" /></td> </tr> </table> </form>
我发现将标签的显示更改为内联块并设置宽度要容易得多
label { display: inline-block; width:100px; text-align: right; }
你应该使用一个表。 就逻辑结构而言 ，数据是表格式的：这就是为什么要让它alignment的原因，因为要表明标签不仅仅与其input框相关，而且也与二维结构中的相关。
[考虑如果你显示string或数字值而不是input框，你会怎么做。]
为此，我宁愿保留一个正确的HTML语义，并尽可能使用简单的CSS。
像这样的东西可以完成这项工作：
label{ display: block; float: left; width : 120px; }
然而，一个缺点是：您可能必须为每个表单select正确的标签宽度，如果您的标签可以是dynamic标签（例如I18N标签），这并不容易。
使用CSS
.containerdiv label { float:left; width:25%; text-align:right; margin-right:5px; /* optional */ } .containerdiv input { float:left; width:65%; }
这给你像这样的东西：
label1 |input box | another label |another input box |
我知道这已经得到了回答，但是我发现了一个新的方法来很好地调整它们 – 还有一个额外的好处 – 请参阅http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/
基本上你使用input周围的标签元素，并使用该元素alignment：
<label><span>Name</span> <input /></label> <label><span>E-Mail</span> <input /></label> <label><span>Comment</span> <textarea></textarea></label>
然后用CSS简单地alignment：
label { display:block; position:relative; } label span { font-weight:bold; position:absolute; left: 3px; } label input, label textarea, label select { margin-left: 120px; }
- 你不需要任何乱七八糟的东西来换行，这意味着你可以dynamic地快速完成多列布局
- 整个行是可点击的。 特别是checkbox，这是一个巨大的帮助。
- dynamic显示/隐藏表单行很容易（您只需searchinput并隐藏其父 – >标签）
- 你可以为整个标签分配类，使它显示错误input更清晰（不仅在input字段周围）
传统的方法是使用表格。
例：
<table> <tbody> <tr> <td> First Name: </td> <td> <input type="text" name="first"> </td> </tr> <tr> <td> Last Name: </td> <td> <input type="text" name="last"> </td> </tr> </tbody> </table>
然而，许多人会认为表格是限制和喜欢CSS。 使用CSS的好处是你可以使用各种元素。 从div，有序和无序列表，你可以完成相同的布局。
最后，你会想使用你最舒服的。
提示：表格很容易上手。
对于非常基本的东西，你可以尝试在桌子上alignment它们。 然而，由于表格是用于内容的，所以使用表格对布局不利。
你可以使用的是CSS浮动技术。
CSS代码
.styleform label{float:left;} .styleform input{margin-left:200px;} /* this gives space for the label on the left */ .styleform .clear{clear:both;} /* prevent elements from stacking weirdly */
HTML
<div class="styleform"> <form> <label>First Name:</label><input type="text" name="first" /><div class="clear"></div> <label>Last Name:</label><input type="text" name="first" /><div class="clear"></div> <label>Email:</label><input type="text" name="first" /><div class="clear"></div> </form> </div>
我写的一篇详细的文章可以find回答IE7浮动问题的问题： IE7浮动正确的问题
我是使用定义列表的忠实粉丝。
<dl> <dt>Username:</dt> <dd><input type="text" name="username" /></dd> <dt>Password:</dt> <dd><input type="password" name="password" /></dd> </dl>
它们很容易使用CSS进行devise，避免了使用表格进行布局的耻辱。
<form> <div> <label for='username'>UserName</label> <input type='text' name='username' id='username' value=''> </div> </form>
在CSS中，您必须将标签和input声明为display：inline-block，并根据您的要求给出宽度。 希望这会帮助你。 🙂
CSS我用来解决这个问题，类似于Gjaa，但风格更好
p { text-align:center; } .styleform label { float:left; width: 40%; text-align:right; } .styleform input { float:left; width: 30%; }
这里是我的HTML，专门用于没有PHP代码的简单registry单
<form id="registration"> <h1>Register</h1> <div class="styleform"> <fieldset id="inputs"> <p><label>Name:</label> <input id="name" type="text" placeholder="Name" autofocus required> </p> <p><label>Email:</label> <input id="email" type="text" placeholder="Email Address" required> </p> <p><label>Username:</label> <input id="username" type="text" placeholder="Username" autofocus required> </p> <p> <label>Password:</label> <input id="password" type="password" placeholder="Password" required> </p> </fieldset> <fieldset id="actions"> </fieldset> </div> <p> <input type="submit" id="submit" value="Register"> </p>
这很简单，我刚刚开始，但它工作得很好
在无序列表中插入input标签。使样式types无。 这是一个例子。
<ul> Input1 <li> <input type="text" /> Input2 <li> <input type="text" /> <ul/>
为我工作！
如果你用表格来组织你的表格，我觉得会更容易。 可能会用尽，但没有任何“复制和粘贴”一点点编辑无法修复。
<form> <table> <tr> <td> <label>First Name:</label> </td> <td> <input type="text" name="first"> </td> </tr> <tr> <td> <label>Last Name:</label> </td> <td> <input type="text" name="last"> </td></tr> <tr> <td> <label> Email: </label> </td> <td> <input type="text" name="email"> </td></tr> </table> </form>
您可以添加一些填充或浮动单元格的内容，使其看起来更加宽敞。
只需添加
<form align="center ></from>
只需alignment开始标记。
