这通常是一项简单的任务。我有一个简单的登录表单,其中包含电子邮件输入,密码输入和提交按钮,所有这些都在水平线上。在关闭样式并尝试不同结构的数小时和数小时之后,按钮比盒子稍微低一点。我想这可能是因为我有绝对定位的元素或它'坐在有背景图像的div。
提前致谢。
以下是截图:
这是html结构:
<div id="new_home_join">
<div id="sign_up_home">
<div id="sign_in_table">
<form name="sendEmail" action="Home.php" method="post">
<table>
<tr>
<td class="sign_in_input">
<input type="text" name="email" class="text" value="Email<?php if($formError == "true") { echo stripslashes($_POST['name']); } ?>" onclick="clearify(this);" />
</td>
<td class="sign_in_input">
<input type="password" name="password" class="text" value="Password<?php if($formError == "true") { echo stripslashes($_POST['']); } ?>" onfocus="clearify(this);" />
</td>
<td class="sign_submit">
<input type="hidden" name="return" value="<?php echo $_GET['return']; ?>" />
<input type="submit" name="subSignIn" value="Login" />
</td>
</tr>
</table>
</form>
<div class="forget_pw">
<a href="password_forget.php">
Forgot Password?
</a>
</div>
</div>
<div id="not_member">
<a href="http://www.cysticlife.org/signUp.php">
<span style="color:#808080;font-size:18px;">Not a CysticLife member?</span><br /> Join our community today!
</a>
</div>
<div id="browse">
or just browse the
<a href="http://www.cysticlife.org/Blogs_future.php">blogs</a> and <a href="http://www.cysticlife.org/Questions_future.php">questions</a>
</div>
</div>
<div id="fuss">
<a href="http://www.cysticlife.org/what-is-cysticlife.php">What is the CysticLife community?</a>
</div>
</div>
这是相关的css:
#new_home_join {background:url(images/join_today.png) no-repeat;width:333px; height:200px;margin:0px 0px 0px 0px;}
#sign_up_home {width:343px;}
#sign_in_table {width:338px;margin:0px auto 0px auto;position:relative;}
#sign_in_table {width:338px;margin:0px auto 0px auto;position:relative;}
#sign_in_table table tr td.sign_in_input {padding:40px 0px 5px 10px;}
#sign_in_table table tr td.sign_in_input input {width:105px; border:1px #999999 solid;padding:2px;font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#666666;}
#sign_in_table table tr td.sign_submit input{width:72px; height:34px; background:url(images/search_button.png) no-repeat; font-style:Arial,Helvetica, sans-serif; color:#333333; font-size:11px;padding:5px 0px 10px 0px; border:0;}
.forget_pw {margin:5px 0px 0px 0px;position:absolute; top:62px; right:82px;}
.forget_pw a {padding:10px;font-family:Arial,Helvetica, sans-serif; font-size:10px; color:#626262; text-decoration:none;}
.forget_pw a:hover {color:#F37336;}
#sign_in_table table tr td.sign_submit input{width:72px; height:34px; background:url(images/search_button.png) no-repeat; font-style:Arial,Helvetica, sans-serif; color:#333333; font-size:11px;padding:5px 0px 10px 0px; border:0;}
#join_us {margin:0px auto 40px 60px; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#F37336; font-weight:bold; text-align:left;padding:0px 50px 80px 0px;float:right}
#join_us a {font-family:Arial,Helvetica, sans-serif; font-size:14px; color:#999999;text-decoration:none;}
#join_us a:hover {color:#F37336;}
#fuss {margin:25px auto 0px auto; font-family:Arial,Helvetica, sans-serif; text-align:center; color:#666666; font-size:12px;}
#fuss a {font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#666666; text-decoration:none;}
#fuss a:hover {color:#FF4701;}
答案 0 :(得分:3)
将vertical-align: bottom
添加到td.sign_submit
。它目前在global.css中设置为baseline
。
之后,您可能需要添加一些顶部填充像素才能使定位完全正确。
修改强>
看起来你需要一个新的规则:
#sign_in_table table tr td.sign_submit { vertical-align: bottom; }
答案 1 :(得分:2)
我注意到的一些事情:
#sign_in_table table tr td.sign_in_input { ... }
#sign_in_table table tr td.sign_in_input input { ... }
#sign_in_table table tr td.sign_submit input{ ... }
1。你可以简化这个。这些选择器过于复杂,减慢了页面呈现和读取代码的速度(参见Writing Efficient CSS):
.sign_in_input { ... }
.sign_in_input input { ... }
.sign_submit input { ... }
以上内容与您的代码相同。而且,它不依赖于HTML结构。
2。在查看属性时,我注意到所有表格单元格都有不同的填充:
.sign_in_input {padding:40px 0px 5px 10px;}
.sign_submit { /* No rules, just a default padding */ }
您应该确保垂直填充是相同的:
.sign_submit { padding-top: 0px; padding-bottom: 0px; }
3。提交按钮具有已定义的高度,但输入没有。如果高度高于输入的高度,则必须将其垂直对齐到中间:
.sign_submit { line-height: 34px; /* = Height of the input */ vertical-align: middle; }
.sign_in_input input { height: 30px; /* Better specify the height of the input fields as well*/ /* ... */ }
4。确保提交按钮图像顶部没有白色/透明条纹。
5。确保将所有垂直输入边距设置为0:
.sign_submit input { margin-top: 0px; margin-bottom: 0px; }
6。尝试在提交按钮后移动隐藏的输入字段。除了谁知道之外,不应该改变任何事情:)
7。如果以上都没有帮助,你也可以使用负边距黑客(但这不是一个很好的解决方案):
.sign_submit input { margin-top: -5px; }
8。您碰巧有.sign_submit输入重复的规则。删除其中一个以避免难以跟踪错误。
9。查看PHP代码时,我注意到您直接将$ _GET内容嵌入到页面中。这被认为是危险的,你应该总是使用htmlentities消毒,以避免XSS。
修改
查看网站后,只需将.sign_submit的垂直对齐更改为底部即可修复Opera浏览器中的问题:
.sign_submit { vertical-align: bottom; /* Instead of middle */ }