HTML 和 CSS 按钮对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3471525/
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
HTML and CSS button alignment
提问by Rodrigo Souza
How can I right align a button inside a div without wiping it from the Markup Flow with valid CSS and HTML? Is applying margin-leftthe only way to do this?
如何在不使用有效的 CSS 和 HTML 从标记流中擦除它的情况下在 div 内右对齐按钮？应用 margin-left 是唯一的方法吗？
I have a structure like this
我有这样的结构
<div class="navContainer">
<div class="title">
<span>Nav Titulo</span>
</div>
<div class="navContent">
Nav Conteudo
</div>
<button type="button">Enviar</button>
</div>
<div class="navContainer">
<div class="title">
<span>Nav Titulo</span>
</div>
<div class="navContent">
Nav Conteudo
</div>
</div>
If I apply button { float: right }or button { position: absolute }the next divwill get over the button. It happens that I just want to make the button position at the right side
如果我申请button { float: right }或button { position: absolute }下一个div将克服按钮。碰巧我只是想让按钮位置在右侧
回答by Matt Briggs
what you want to read up on is clearing
你想读的是清除
if you have floated elements, they go out of page flow, but any element with clear:both will stay in page flow, but not allow anything on either side of it, floated or not.
如果你有浮动元素，它们会离开页面流，但是任何带有 clear:both 的元素都将留在页面流中，但不允许它的任何一侧有任何东西，无论是否浮动。
in practice, adding a clear:both element after you floats makes things work the way you want them to.
实际上，在浮动后添加 clear:both 元素会使事情按照您希望的方式工作。
回答by mcandre
.navContainer { text-align: right; }
回答by ghoppe
@Matt is right. What you need to do is clear the div elements.
@马特是对的。您需要做的是清除 div 元素。
.navContainer {clear: both}
If you want your button aligned at the top of the containing div, you might have to move it before your div element of class "title".
如果您希望您的按钮在包含 div 的顶部对齐，您可能需要将它移动到类“title”的 div 元素之前。
