如何右对齐 div 元素？答案

【问题标题】：How do I right align div elements?如何右对齐 div 元素？
【发布时间】：2011-12-03 08:10:50
【问题描述】：

我的 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="600" height="600" style="background:lightgray;">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>

【问题讨论】：

标签： css html

【解决方案1】：

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

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

<div style="display: flex; justify-content: space-between;">
  <div id="emptyDiv"></div>
  <div>I'm on the right</div>
</div>

【讨论】：

【解决方案2】：

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

.parent-div {
  display: flex;
  float: right;
}


/*Below: child-div styling is not needed for this purpose! this is just for demonstration:*/

.child-div {
  text-align: center;
  background-color: powderblue;
  margin: auto 10px;
  height: 100px;
  width: 50px;
}

<div class="">CANVAS div </div>
<div class="parent-div">
  <div class="child-div">child 1</div>
  <div class="child-div">child 2</div>
  <div class="child-div">...</div>
  <div class="child-div">child n</div>
</div>

【讨论】：

【解决方案3】：

您只需添加以下 css 即可轻松完成：（在 IE11 中工作）

<div>
<!-- Subtract with the amount of your element width -->
<span style="margin-left: calc(100vw - 50px)">Right</span>
</div>

【讨论】：

这不起作用，除非您知道要右对齐的每个元素的确切宽度。极其脆弱到不切实际的解决方案。

【解决方案4】：

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

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

请参阅 the IE Double Margin Bug 了解原因。

【讨论】：

@ShellNinja 为什么？我知道0 是有效的，但是 0px 也是有效的......争论你的观点，所以我们学到了一些东西。
省略单位允许浏览器跳过某些计算以提高性能。如果它是零，为什么要浪费资源计算基于一个单元的布局？无论单位如何，零都是零......人们会认为这个逻辑现在已经内置到浏览器中。 link
不能不同意，但我怀疑它对性能的影响很大。编辑。
我无法让它工作，div 仍然左对齐。你能提供一个小提琴或一些（更多）行 html/css 吗？
确保你的元素有display: block;

【解决方案5】：

也许只是：

  margin: auto 0 auto auto;

【讨论】：

@SoniSol 哪个链接？
为什么要投反对票？它就像魅力一样。谢谢人

【解决方案6】：

简单的答案在这里：

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

我个人觉得这是2020年的正确答案：P

【解决方案8】：

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

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

【讨论】：

我想你的意思是<div class="text-right"></div>。
anil 没有错，“pull-right”类的结果是“float:right;” （使用 Bootstrap 3.4.1 测试）

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>

您还可以变得更漂亮，简单地说：

<div style="display: flex; justify-content: space-around">
  <div>Left</div>
  <div>Right</div>
</div>

而且更喜欢：

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>

【讨论】：

它可以工作，但是当屏幕变小而不是堆叠时，它们就会变得非常窄
您需要添加一个媒体查询以在您定义的断点处将 flex-direction 从行更改为列。在此示例中，您可能希望更改或删除 justify-content，否则内容会上下而不是左右拉伸。
对我有用，但我还（在第一个示例中）添加了一个 float: right，因此右侧的段落不会弄乱左侧的行。

【解决方案11】：

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

【讨论】：

【解决方案12】：

如果你不需要支持 IE9 及以下，你可以使用 flexbox 来解决这个问题：codepen

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

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

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

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

这是上面链接的代码笔中 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;
}

【讨论】：

【解决方案13】：

这个问题的其他答案不太好，因为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.

【讨论】：

这对我来说可以将 3 个图像向右对齐，并在它们之间放置
标签。
要明确：这不会右对齐 div 本身。两个子 div“父/标题”中的每一个都占据屏幕的整个宽度，您可以通过设置它们的背景颜色来看到。您所做的是对齐其中的文本。

【解决方案14】：

您可以创建一个同时包含表单和按钮的 div，然后通过设置 float: right; 使 div 向右浮动。

【讨论】：

从没想过我会使用浮点数。我尝试了margin-left: auto;，但没有奏效，这让我感到惊讶，因为我试图向右对齐的元素是相对的。
@DFSFOT 相反的事情发生在我身上。预期的 float:right 可以工作，但 margin-left: auto 成功了，谢谢。
这在我的情况下没有影响，style="margin-left: auto;margin-right: 0;" 有效果（感谢@pstanton）。

【解决方案15】：

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

可以在表单和按钮中添加float:right和clear:both;的属性

【讨论】：

【解决方案16】：

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

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

在我的网站上工作:)

【讨论】：

请不要使用 HTML 属性来格式化您的页面。这就是 CSS 的用途。其实align属性就是now deprecated。
...因此提出这样一个问题的原因以及需要回答它的原因，因为旧方法不再有效。
ohohoh，这么多负面））