对于带有提交按钮的表单,我有一个很大的数字,我需要右键对齐按钮.问题是,当我使用float：right时,submit元素将从普通文档流中取出.这意味着表单的高度会降低,然后它的底部边框会干扰
这是代码：
<html>
<head>
<style type="text/css">
#left-col {
width: 290px;
}
#loginForm {
border: 1px solid black;
}
#submit {
/* float: right; */
}
</style>
</head>
<body>
<div id="left-col">
<div id="loginForm">
<form id="user-login-form" enctype="application/x-www-form-urlencoded" method="post" action="">
<label for="email" class="required">Email</label>
<input type="text" name="email" id="email" value="">
<label for="password" class="required">Password</label>
<input type="password" name="password" id="password" value="">
<input type="submit" name="submit" id="submit" value="Login" class="submit">
</form>
</div>
</div>
</body>
</html>
表单是以编程方式生成的(使用Zend_Form),因此我希望避免需要其他元素的hacks(例如带有clear的段落：两者).
希望这对CSS大师来说是一个简单的问题！
谢谢…
您可以使用CSS：after pseudoelement清除容器,而无需添加任何额外的HTML标记.你可以在你的CSS中添加这样的东西：
#loginForm:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
或者表单元素,无论您认为哪个更合适.