CSS 如何右对齐这个提交按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8828451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to right align this submit button?
提问by Kim Prince
I have a large number for forms with submit buttons and I need to right align the buttons. The problem is that when I use float: right, the submit element is taken out of the normal document flow. This means the form's height is reduced and it's bottom border then interferes with the button.
我有大量带有提交按钮的表单，我需要右对齐按钮。问题是当我使用时float: right，提交元素被从正常的文档流中取出。这意味着表单的高度降低了，它的底部边框会干扰按钮。
Here's the code:
这是代码：
<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>
The forms are generated programatically (using Zend_Form) so I am hoping to avoid hacks that require additional elements (such as paragraphs with clear: both).
表单以编程方式生成（使用 Zend_Form），所以我希望避免需要额外元素的黑客攻击（例如带有 clear: both 的段落）。
Hopefully this will be a simple question for a CSS guru!
希望这对 CSS 大师来说是一个简单的问题！
Thanks...
谢谢...
回答by justisb
You can use the CSS :afterpseudoelement to clear the container, without adding any extra HTML markup.
您可以使用 CSS:after伪元素来清除容器，而无需添加任何额外的 HTML 标记。
You would add something like this to your CSS:
您可以在 CSS 中添加如下内容：
#loginForm:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Or to the formelement, whichever you deem more appropriate.
或者form你认为更合适的元素。
回答by Oskar Berggren
To make the form (or any element) expand to contain internal floats, apply the "overflow: auto" style, as per the last paragraph of 10.6.7 of the CCS 2.1 spec:
要使表单（或任何元素）扩展以包含内部浮动，请按照 CCS 2.1 规范 10.6.7的最后一段应用“溢出：自动”样式：
In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
此外，如果元素有任何浮动后代，其底部边距边缘低于元素的底部内容边缘，则增加高度以包括这些边缘。仅考虑参与此块格式化上下文的浮点数，例如，绝对定位的后代中的浮点数或其他浮点数不会被考虑在内。
According to section 10.6.6. of the same spec, among other things, it applies to:
根据第 10.6.6 节。具有相同规格的，除其他外，它适用于：
Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible' (except if the 'overflow' property's value has been propagated to the viewport).
当 'overflow' 不计算为 'visible' 时，正常流中的块级非替换元素（除非 'overflow' 属性的值已传播到视口）。
回答by stealthyninja
Here's a jsFiddle demo I made -- http://jsfiddle.net/tm8bY/1/-- to show how you should be able to achieve what you want.
这是我制作的 jsFiddle 演示——http: //jsfiddle.net/tm8bY/1/——来展示你应该如何实现你想要的。
Copy of the code used in the demo:
演示中使用的代码的副本：
<html>
<head>
<style type="text/css">
#left-col {
width: 290px;
}
#loginForm {
border: 1px solid black;
}
#submit {
/* float: right; */
}
label {
display: block;
}
</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="">
</div>
<div style="text-align: right">
<input type="submit" name="submit" id="submit" value="Login" class="submit">
</form>
</div>
</div>
</body>
</html>
Note: The in-line style I used could be converted to a CSS classinstead. I also added a rule for labelso it looks a little more styled.
注意：我使用的内嵌样式可以转换为 CSS class。我还添加了一个规则，label所以它看起来更有风格。
回答by chchrist
If I am not mistaken you want the submit button inside the border then http://jsfiddle.net/bTp2K/1/
如果我没记错的话，你想要边框内的提交按钮，然后 http://jsfiddle.net/bTp2K/1/
<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="">
</div>
<div style="text-align: right">
<input type="submit" name="submit" id="submit" value="Login" class="submit">
</form>
</div>
</div>
</body>
</html>
回答by Balaji Narendra
[type=submit]{
margin-left: 121px;
margin-top: 19px;
width: 84px;
height: 40px;
font-size:14px;
font-weight:700;
}
