logo标签列表

如何将div元素右对齐？

csshtml
637

我的HTML文档的主体由三个元素组成：一个按钮，一个表单和一个画布。我想要将按钮和表单右对齐，同时保持画布左对齐。问题是当我尝试对齐前两个元素时，它们不再相互跟随，而是水平排列在一起？以下是我目前的代码，我希望表单直接跟在按钮右边，没有间隙。

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

17个回答
840

浮动（Floats）可以使用，但在IE 6和7中存在问题。
我更喜欢在内部div上使用以下内容：

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

参见IE双倍边距Bug，以了解原因。

7
为什么？我知道 0 是有效的，但是 0px 也是有效的...请阐述你的观点，让我们学到更多东西。 - pstanton
45
不带单位可以让浏览器在渲染时跳过某些计算，从而提高性能。如果值为零，为什么要根据单位来计算布局，浪费资源呢？无论单位如何，零就是零...人们会认为这种逻辑现在应该内置于浏览器中了。[链接]（http://twoopz.tumblr.com/post/7021586127/css3-improve-performance-with-best-practices） - ShellNinja
8
无法不同意，但我怀疑它对性能的影响不大。编辑。 - pstanton
29
无法使这个生效，div 仍然左对齐。您能提供一个 JSFiddle 或一些更多的 HTML/CSS 代码吗？ - Gerrit-K
39
确保您的元素具有 display: block; 属性。 - derek_duncan
显示剩余10条评论
568

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

6
没想到我现在要使用float属性了。我尝试了 margin-left: auto; 但它没有生效，这让我很惊讶，因为我想要右对齐的元素是相对定位的。 - DFSFOT
6
发生了与我相反的情况。原本期望使用float:right生效，但是margin-left: auto起了作用，谢谢。 - Carl Kroeger Ihl
4
在我的情况下这没有效果，但 style="margin-left: auto;margin-right: 0;" 有作用（感谢@pstanton）。 - Andreas L.
"float: right" 等于什么？ - Snowmanzzz
1
@AndreasL 的解决方案非常有效。 - Denver Shenal
谢谢你提醒我浮点数仍然存在！ - Aaron Sarnat
420

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

5
它能够工作，但当屏幕变小时，它们并不会自动堆叠，而是变得非常狭窄。 - jean d'arme
7
你需要添加一个媒体查询，在你定义的断点处将flex-direction从行改为列。在这个例子中，你可能想要改变或删除你的justify-content，否则东西会上下拉伸而不是左右。 - Michael Bushe
对我来说是行的，但我也加入了一个 float：right（在第一个示例中），这样右侧的段落就不会干扰左侧的行。 - Yogurtu
这应该是被批准的答案。 - Emir Sürmen
58

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

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>
7
我个人认为这是2020年的正确答案 :P - Mike Kellogg
39

请注意，虽然这个答案并没有错，但是它是在2015年撰写的非常过时的方法。

由于float:right可以超出父元素div（overflow:hidden对于父元素有时可能有所帮助），而且对于我来说，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>

这里是一个 JS Fiddle。

1
这对我来说起到了作用，将3个图像与 <br /> 标签对齐到右侧。 - Alex Banman
要明确一点：这并不是将div本身右对齐。两个子div“parent/caption”都占据了屏幕的整个宽度，可以通过设置它们的背景颜色来看到这一点。你所做的是对其中的文本进行对齐。 - Lucian Wischik
30
如果您有多个要放置在父级div右侧并排对齐的div，请在父级div上设置text-align: right;。
22
15

也许只是：

  margin: auto 0 auto auto;
@SoniSol 哪个链接？ - showdev
12

简单的答案在这里：

<div style="text-align: right;">
    anything:
    <select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
    </select>
</div>
10
有时候使用float: left 会导致设计问题，这种情况下可以使用 display flex 来解决问题，示例如下： 

.right {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 0;
}
<div>
  <div class="right">Right</div>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接