如何右对齐 div 元素？

浮点数没问题，但在 IE 6 和 7 中存在问题。我更喜欢在内部 div 上使用以下内容：

margin-left: auto; 
margin-right: 0;

有关原因的说明，请参见 the IE Double Margin Bug。

---

您可以制作一个包含表单 & 的 div按钮，然后通过设置 float: right; 使 div 向右浮动。

---

旧答案。更新：使用 flexbox，现在几乎可以在所有浏览器中使用。

而且你可以变得更漂亮，简单地说：

更高级：

---

您可以使用 flexbox 和 flex-grow 将最后一个元素推到右侧。

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>

---

这个问题的其他答案不太好，因为 float:right 可以超出父 div（溢出：对父级隐藏有时可能会有所帮助）并且 margin-left: auto, margin-right: 0 对我来说在复杂的嵌套 div 中不起作用（我没有调查为什么）。

我发现对于某些元素 text-align: right 有效，假设当元素和父元素都是 inline 或 inline-block 时它有效。

注意：text-align CSS 属性描述了文本等内联内容如何在其父块元素中对齐。 text-align 不控制块元素本身的对齐方式，只控制它们的内联内容。

一个例子：

<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>

Here's a JS Fiddle。

---

如果您有多个要在父 div 的右端并排对齐的 div，请在父 div 上设置 text-align: right;。

---

你的意思是这样吗？ http://jsfiddle.net/6PyrK/1

您可以将 float:right 和 clear:both; 的属性添加到表单和按钮

---

也许只是：

  margin: auto 0 auto auto;

---

简单的答案在这里：

<div style="text-align: right;">
    anything:
    <select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
    </select>
</div>

---

一种方法是为那些需要向右拉的元素设置一个父 div，然后像下面的示例中所示的那样做其余的事情，使它们右对齐：

.parent-div { 显示：弹性；浮动：对； /*下面：这个目的不需要child-div样式！这只是为了演示：*/ .child-div { text-align: center;背景色：粉蓝色；边距：自动 10px；高度：100px；宽度：50px； }

---

如果您不必支持 IE9 及以下版本，您可以使用 flexbox 解决此问题：codepen

IE10 和 11 (flexbox support) 也有一些错误，但在此示例中不存在

您可以通过将 <button> 和 <form> 包装在具有 flex-direction: column 的容器中来垂直对齐它们。元素的源顺序将是它们从上到下显示的顺序，因此我对它们进行了重新排序。

然后您可以水平对齐表单 &通过将按钮容器与画布包装在具有 flex-direction: row 的容器中。同样，元素的源顺序将是它们从左到右显示的顺序，因此我对它们进行了重新排序。

此外，这将要求您从问题中链接的代码中删除所有 position 和 float 样式规则。

这是上面链接的 codepen 中 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>

这是相关的CSS

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}

---

如果您使用的是引导程序，那么：

<div class="pull-right"></div>

---

display: flex;
justify-content: space-between;

没有被提及。如果有 2 个元素（即使一个是空 div），它会将一个放在左侧，一个放在右侧。

---

有时 float: left 会导致设计问题，在这种情况下，您可以像这样使用 display flex：

.right { 显示：弹性；证明内容：弹性结束；左边距：自动；右边距：0； }

---

您可以简单地使用 padding-left:60% （例如）将您的内容向右对齐，同时将内容包装在响应式容器中（在我的情况下我需要导航栏）以确保它在所有示例中都有效。

---

您只需添加此 css 即可轻松完成：（适用于 IE11）

---

我知道这是一篇旧帖子，但您不能直接使用 <div id=xyz align="right"> 吗？

您可以将 right 替换为 left、center 和 justify。

在我的网站上工作:)

---