我的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>
答案 0 :(得分：361)
花车是好的，但ie6＆amp;有问题7。
我更喜欢在内部div上使用margin-left:auto; margin-right:0;。
答案 1 :(得分：224)
你可以创建一个包含表格和格式的div。按钮，然后设置float: right;。
答案 2 :(得分：111)
旧答案。更新：使用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>
答案 3 :(得分：27)
这个问题的其他答案并不是很好，因为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>
答案 4 :(得分：17)
您可以将float:right和clear:both;的属性添加到表单和按钮
答案 5 :(得分：7)
如果您想要在父div的右端并排排列多个div，请在父div上设置text-align: right;。
答案 6 :(得分：7)
您可以将flexbox与flex-grow结合使用，将最后一个元素推到右侧。
<div style="display: flex;">
<div style="flex-grow: 1;">Left</div>
<div>Right</div>
</div>
答案 7 :(得分：4)
简单的答案在这里：
<div style="text-align: right;">
anything:
<select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
</select>
</div>
答案 8 :(得分：2)
如果您不必支持IE9及以下版本，则可以使用flexbox解决此问题：codepen
IE10和11（flexbox support）也存在一些错误，但在此示例中不存在
您可以将<button>和<form>垂直对齐，方法是将它们包装在flex-direction: column的容器中。元素的源顺序将是它们从上到下显示的顺序，因此我重新排序它们。
然后，您可以水平对齐表格＆amp;带有画布的按钮容器，将它们包装在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;
}
答案 9 :(得分：1)
如果您使用的是引导程序，则：
<div class="pull-right"></div>
答案 10 :(得分：0)
您可以简单地使用padding-left：60％（例如ex）将您的内容向右对齐，同时将内容包装在响应容器中（我需要使用navbar） 以确保其在所有示例中均有效。
答案 11 :(得分：0)
要右对齐：
<div style="float:right">
</div>
答案 12 :(得分：0)
也许就是：
margin: auto 0 auto auto;
答案 13 :(得分：-1)
您只需添加以下 css 即可轻松完成： （适用于 IE11）
<div>
<!-- Subtract with the amount of your element width -->
<span style="margin-left: calc(100vw - 50px)">Right</span>
</div>答案 14 :(得分：-12)
我知道这是一篇旧帖子，但你不能只使用<div id=xyz align="right">。
你可以用左，中，右对齐替换。
在我的网站上工作：）