如何正确对齐div元素？

350

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

展开摘要

css html

— MEURSAULT
source

336

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

— Vantrung -cuncon
source

没想到我会使用浮点数。我尝试了一下，margin-left: auto;但没有成功，这让我感到惊讶，因为我尝试向右对齐的元素是相对的。

— DFSFOT '19

461

浮点数还可以，但是ie6和7有问题。

我更喜欢margin-left:auto; margin-right:0;在内部div上使用。

— 斯坦顿
source

6

@ShellNinja为什么？我知道这0是有效的，但是0px也是有效的……争辩您的观点，以便我们学习一些东西。

— pstanton 2014年

29

省略该单元可以使浏览器在渲染时跳过某些计算，从而提高性能。如果为零，为什么要浪费资源来基于单元来计算布局？零是零，与单位无关...人们会认为这种逻辑现在已经内置在浏览器中。链接

— ShellNinja 2014年

7

不能不同意，但是我怀疑这会影响性能。编辑。

— pstanton 2014年

24

我无法使用它，div仍然向左对齐。您能否提供html / css的小提琴或几行（更多）？

— Griddo 2014年

21

确保您的元素具有display: block;

— derek_duncan 2014年

202

旧答案。更新：使用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>

展开摘要

— 迈克尔·布什
source

4

它可以工作，但是当屏幕变小而不是堆叠时，它们会变得非常狭窄

— Jean d'arme

6

您需要添加一个媒体查询，以在您定义的断点处将弹性方向从行更改为列。在此示例中，您可能想要更改或删除辩解内容，否则事情将上下伸展，而不是左右伸展。

— 迈克尔·布什

这对我有用。以前的答案没有。使用“闪亮”。

— 罗杰

30

这个问题的其他答案不太好，因为它float:right可能超出父div的范围（溢出：有时为父级隐藏可能会有所帮助），而margin-left: auto, margin-right: 0对于我来说，它不适用于复杂的嵌套div（我没有调查原因）。

我已经弄清楚了对于某些元素text-align: right有效，假设当元素和父元素均为inline或时，此方法有效inline-block。

注意：text-alignCSS属性描述了内联内容（如文本）如何在其父块元素中对齐。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>

这是JS Fiddle。

— 姆拉登·阿达莫维奇（Mladen Adamovic）
source

17

你是这个意思吗 http://jsfiddle.net/6PyrK/1

您可以添加的属性float:right，并clear:both;以表格和按钮

— 约瑟夫·马里克
source

15

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

— 莫比塔
source

14

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

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

— 吉兹格
source

1

我个人认为这是2020年的正确答案：P

— Mike Kellogg

2

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

IE10和11也有一些错误（对flexbox的支持），但是在此示例中不存在

您可以将<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;
}

— 贝茨550
source

1

简单的答案在这里：

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

— 社区Ans
source

0

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

— 里凡莎
source

0

如果使用引导程序，则：

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

— 阿尼尔·史瑞莎
source

我想你的意思是<div class="text-right"></div>。

— Alex Barker

1

anil没错，“ pull-right”类的结果为“ float：right;” （已通过Bootstrap 3.4.1测试）

— Fabian Horlacher

-13

我知道这是一篇过时的文章，但您不能只使用<div id=xyz align="right">正确的内容。

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

在我的网站上工作：）

— 达菲德
source

21

请不要使用HTML属性来设置页面格式。这就是CSS的用途。实际上，该align属性现已弃用。

— 汉娜2014年

4

...以及这样的问题的原因以及必须回答的问题，因为旧方法不再起作用。

— vapcguy 2015年

哦，太消极了））

— 西