HTML表单输入/标签对齐 [英] HTML Form Input/Label Alignment
本文介绍了HTML表单输入/标签对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个简单的注册表单。为了整齐排列我使用的表格方法。但是，文本并未在表格中心对齐，而是略低于表格。我以前使用过类似的方法，但它工作正常。
你可以在这里看到问题。 http://www.krawczyksolutions.com/sender/register.php
该表的代码是
< div class =headalign = 中心 >
< div align =centerclass =box>
< h2>注册新帐户< / h2>< p />
< form name =regformaction =javascript：checkForm（）;>
< table>
< tr>
< td>名字：< / td>
< td>< input type =textname =fnameclass =inputsize =30/>< p />< / td>
< / tr>
< tr>
< td>姓氏：< / td>
< td>< input type =textname =lnameclass =inputsize =30/>< p />< / td>
< / tr>
< tr>
< td>公司：< / td>
< td>< input type =textname =compclass =inputsize =30/>< p />< / td>
< / tr>
< tr>
< td>地址行1：< / td>
< td>< input type =textname =add1class =inputsize =30/>< p />< / td>
< / tr>
< tr>
< td>地址行2：< / td>
< td>< input type =textname =add2class =inputsize =30/>< p />< / td>
< / tr>
< tr>
< td>城市：< / td>
< td>< input type =textname =cityclass =inputsize =30/>< p />< / td>
< / tr>
< tr>
< td>邮政编码：< / td>
< td>< input type =textname =postclass =inputsize =30/>< p />< / td>
< / tr>
< tr>
< td>国家：< / td>
< td>< input type =textname =countrclass =inputsize =30/>< p />< / td>
< / tr>
< tr>
< td>电子邮件：< / td>
< td>< input type =textname =emailclass =inputsize =30/>< p />< / td>
< / tr>
< tr>
< td>确认电子邮件地址：< / td>
< td>< input type =textname =cemailclass =inputsize =30/>< p />< / td>
< / tr>
< tr>
< td>密码：< / td>
< td>< input type =passwordname =passclass =inputsize =30/>< p />< / td>
< / tr>
< tr>
< td>确认密码：< / td>
< td>< input type =passwordname =cpassclass =inputsize =30/>< p />< / td>
< / tr>
< / table>
< input type =submitvalue =继续付款/>< p />
< / form>
< / div>
< / div>
CSS文件包含以下内容（注意：CSS文件中的一些元素没有使用在本页）。
body
{
background-image：url（img / backgr.jpg）;
颜色：＃9E9E9E;
font-family：Optima，'Lucida Grande'，'Lucida Sans Unicode'，Verdana，Helvetica，Arial，sans-serif;
}
#header
{
margin：20px;
padding：10px;
height：60px;
}
#footer
{
margin：20px;
padding：10px;
height：60px;
}
#leftcol
{
position：absolute;
剩下：150px;
top：160px;
width：400px;
}
#rightcol
{
position：absolute;
right：150px;
top：220px;
width：300px;
}
.inputbox
{
background-color：black;
颜色：＃9E9E9E;
font-family：Optima，'Lucida Grande'，'Lucida Sans Unicode'，Verdana，Helvetica，Arial，sans-serif;
box-shadow：1px;
border-radius：3px;
-webkit-border-radius：3px;
-moz-border-radius：3px;
}
.box {width：700px; padding：15px; background-color：#fff; margin-bottom：18px; border-radius：0.6em; -moz-border-radius：0.6em; -webkit-border-radius：0.6em;}
.box {
-moz-box-shadow：4px 4px 5px＃111;
-webkit-box-shadow：4px 4px 5px＃111;
box-shadow：4px 4px 5px＃111;
/ *对于IE 8 * /
-ms-filter：progid：DXImageTransform.Microsoft.Shadow（Strength = 4，Direction = 135，Color ='＃111111'）;
/ *对于IE 5.5 - 7 * /
filter：progid：DXImageTransform.Microsoft.Shadow（Strength = 4，Direction = 135，Color ='＃111111'）;
}
.head
{
margin-top：50px;
}
.input
{
font-size：14px;
}
更新 $ b
尽管mason81确实解决了这个问题，但任何碰到这个问题的人都应该阅读Truth关于使用CSS而不是表来对齐它的答案。
解决方案
试试这个：
tr
{
vertical-align：text-bottom;
}
I'm trying to create a simple registration form. In order to align everything neatly I used the table method. However the text isn't aligned in the center of the table instead being very slightly below the table. I've used similar methods before and had it work fine though.
You can see the problem here. http://www.krawczyksolutions.com/sender/register.php
The code for the table is
<div class="head" align="center">
<div align="center" class="box">
<h2>Register New Account</h2><p/>
<form name="regform" action="javascript:checkForm();">
<table>
<tr>
<td>First Name: </td>
<td><input type="text" name="fname" class="input" size="30" /><p/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type="text" name="lname" class="input" size="30"/><p/></td>
</tr>
<tr>
<td>Company: </td>
<td><input type="text" name="comp" class="input" size="30"/><p/></td>
</tr>
<tr>
<td>Address Line 1: </td>
<td><input type="text" name="add1" class="input" size="30" /><p/></td>
</tr>
<tr>
<td>Address Line 2: </td>
<td><input type="text" name="add2" class="input" size="30" /><p/></td>
</tr>
<tr>
<td>City: </td>
<td><input type="text" name="city" class="input" size="30" /><p/></td>
</tr>
<tr>
<td>Postcode: </td>
<td><input type="text" name="post" class="input" size="30" /><p/></td>
</tr>
<tr>
<td>Country: </td>
<td><input type="text" name="countr" class="input" size="30" /><p/></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" name="email" class="input" size="30" /><p/></td>
</tr>
<tr>
<td>Confirm Email: </td>
<td><input type="text" name="cemail" class="input" size="30" /><p/></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="pass" class="input" size="30" /><p/></td>
</tr>
<tr>
<td>Confirm Password: </td>
<td><input type="password" name="cpass" class="input" size="30" /><p/></td>
</tr>
</table>
<input type="submit" value="Proceed To Payment"/><p/>
</form>
</div>
</div>
The CSS file contains the following (NOTE: Some of the elements in the CSS file arn't used on this page).
body
{
background-image:url("img/backgr.jpg");
color:#9E9E9E;
font-family:Optima, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif;
}
#header
{
margin: 20px;
padding: 10px;
height: 60px;
}
#footer
{
margin: 20px;
padding: 10px;
height: 60px;
}
#leftcol
{
position: absolute;
left: 150px;
top: 160px;
width:400px;
}
#rightcol
{
position: absolute;
right: 150px;
top: 220px;
width: 300px;
}
.inputbox
{
background-color:black;
color:#9E9E9E;
font-family:Optima, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif;
box-shadow:1px;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}
.box {width:700px;padding:15px;background-color:#fff;margin-bottom:18px;border-radius:0.6em;-moz-border-radius:0.6em;-webkit-border-radius:0.6em;}
.box {
-moz-box-shadow: 4px 4px 5px #111;
-webkit-box-shadow: 4px 4px 5px #111;
box-shadow: 4px 4px 5px #111;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');
}
.head
{
margin-top:50px;
}
.input
{
font-size:14px;
}
UPDATE
Although mason81 did solve this particular problem, anyone else coming across this should read Truth's answer regarding using just CSS rather than tables to align it. Much better and easier way to do it.
解决方案
Try this:
tr
{
vertical-align:text-bottom;
}
这篇关于HTML表单输入/标签对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
