Html 如何正确对齐 div 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7693224/
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 do I right align div elements?
提问by MEURSAULT
The body of my html document consists of 3 elements, a button, a form, and a canvas. I want the button and the form to be right aligned and the canvas to stay left aligned. The problem is when I try to align the first two elements, they no longer follow each other and instead are next to each other horizontally?, heres the code I have so far, I want the form to follow directly after the button on the right with no space in between.
我的 html 文档的主体由 3 个元素组成，一个按钮、一个表单和一个画布。我希望按钮和表单右对齐，而画布保持左对齐。问题是当我尝试对齐前两个元素时，它们不再相互跟随，而是水平相邻？，这是我到目前为止的代码，我希望表单直接跟随在右侧的按钮之后中间没有空间。
#cTask {
background-color: lightgreen;
}
#button {
position: relative;
float: right;
}
#addEventForm {
position: relative;
float: right;
border: 2px solid #003B62;
font-family: verdana;
background-color: #B5CFE0;
padding-left: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="timeline.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>
<body bgcolor="000" TEXT="FFFFFF">
<div id="button">
<button onclick="showForm()" type="button" id="cTask">
Create Task
</button>
</div>
<div id="addEventForm">
<form>
<p><label>Customer name: <input></label></p>
<p><label>Telephone: <input type=tel></label></p>
<p><label>E-mail address: <input type=email></label></p>
</form>
</div>
<div>
<canvas id="myBoard" width="1000" height="600">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
</html>采纳答案by vantrung -cuncon
You can make a div that contains both the form & the button, then make the div float to the right by setting float: right;.
您可以创建一个包含表单和按钮的 div，然后通过设置float: right;.
回答by pstanton
floats are ok, but problematic with ie6 & 7.
浮点数没问题，但 ie6 和 7 有问题。
i'd prefer to use margin-left:auto; margin-right:0;on the inner div.
我更喜欢margin-left:auto; margin-right:0;在内部 div 上使用。
回答by Michael Bushe
Old answers. An update: use flexbox, pretty much works in all browsers now.
旧答案。更新：使用 flexbox，现在几乎适用于所有浏览器。
<div style="display: flex; justify-content: flex-end">
<div>I'm on the right</div>
</div>And you can get even fancier, simply:
而且你可以变得更漂亮，简单地说：
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Right</div>
</div>And fancier:
和鸽友：
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>回答by Mladen Adamovic
Other answers for this question are not so good since float:rightcan go outside of a parent div (overflow: hidden for parent sometimes might help) and margin-left: auto, margin-right: 0for me didn't work in complex nested divs (I didn't investigate why).
这个问题的其他答案不是很好，因为float:right可以超出父 div（溢出：为父隐藏有时可能会有所帮助）并且margin-left: auto, margin-right: 0对我来说在复杂的嵌套 div 中不起作用（我没有调查原因）。
I've figured out that for certain elements text-align: rightworks, assuming this works when the element and parent are both inlineor inline-block.
我发现对于某些元素text-align: right有效，假设当元素和父元素都是inlineor时这有效inline-block。
Note: the text-alignCSS property describes how inline content like text is aligned in its parent block element. text-aligndoes not control the alignment of block elements itself, only their inline content.
注意：text-alignCSS 属性描述了内联内容（如文本）如何在其父块元素中对齐。text-align不控制块元素本身的对齐方式，只控制它们的内联内容。
An example:
一个例子：
<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
<div style="display: block; width: 100%">
I'm parent
</div>
<div style="display: inline-block; text-align: right; width: 100%">
Caption for parent
</div>
</div>
回答by Joseph Marikle
Do you mean like this? http://jsfiddle.net/6PyrK/1
你的意思是这样吗？http://jsfiddle.net/6PyrK/1
You can add the attributes of float:rightand clear:both;to the form and button
您可以添加的属性float:right，并clear:both;以表格和按钮
回答by jzilg
You can use flexboxwith flex-growto push the last element to the right.
您可以使用flexboxwithflex-grow将最后一个元素向右推。
<div style="display: flex;">
<div style="flex-grow: 1;">Left</div>
<div>Right</div>
</div>
回答by Mo Bitar
If you have multiple divs that you want aligned side by side at the right end of the parent div, set text-align: right;on the parent div.
如果您有多个要在父 div 右端并排对齐的 div，请在父 div 上设置text-align: right;。
回答by Bates550
If you don't have to support IE9 and below you can use flexbox to solve this: codepen
如果你不需要支持 IE9 及以下你可以使用 flexbox 来解决这个问题：codepen
There's also a few bugs with IE10 and 11 (flexbox support), but they are not present in this example
IE10 和 11（支持 flexbox）也有一些错误，但在这个例子中不存在
You can vertically align the <button>and the <form>by wrapping them in a container with flex-direction: column. The source order of the elements will be the order in which they're displayed from top to bottom so I reordered them.
您可以通过将<button>和<form>包裹在带有 的容器中来垂直对齐和flex-direction: column。元素的源顺序将是它们从上到下显示的顺序，所以我对它们重新排序。
You can then horizontally align the form & button container with the canvas by wrapping them in a container with flex-direction: row. Again the source order of the elements will be the order in which they're displayed from left to right so I reordered them.
然后，您可以将表单和按钮容器与画布水平对齐，方法是将它们包装在带有flex-direction: row. 同样，元素的源顺序将是它们从左到右显示的顺序，所以我对它们重新排序。
Also, this would require that you remove all positionand floatstyle rules from the code linked in the question.
此外，这将要求您从问题中链接的代码中删除所有position和float样式规则。
Here's a trimmed down version of the HTML in the codepen linked above.
这是上面链接的代码笔中 HTML 的精简版本。
<div id="mainContainer">
<div>
<canvas></canvas>
</div>
<div id="formContainer">
<div id="addEventForm">
<form></form>
</div>
<div id="button">
<button></button>
</div>
</div>
</div>
And here is the relevant CSS
这是相关的 CSS
#mainContainer {
display: flex;
flex-direction: row;
}
#formContainer {
display: flex;
flex-direction: column;
}
回答by Leevansha
You can simply use padding-left:60% (for ex) to align your content to right and simultaneously wrap the content in responsive container (I required navbar in my case) to ensure it works in all examples.
您可以简单地使用 padding-left:60%（例如）将您的内容向右对齐并同时将内容包装在响应式容器中（在我的情况下我需要导航栏）以确保它适用于所有示例。
回答by anil shrestha
If you are using bootstrap, then:
如果您使用的是引导程序，则：
<div class="pull-right"></div>
