我的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>
旧的答案。更新:使用flexbox，现在几乎适用于所有浏览器。
< span style=" font - family:宋体;justify-content: flex-end”>
<div>我在右边</div>
< / div >
你还可以更花哨，简单地说:
< span style=" font - family:宋体;justify-content:空间”>
左< div > < / div >
< div >对< / div >
< / div >
和爱好者:
< span style=" font - family:宋体;justify-content:空间”>
左< div > < / div >
中间< div > < / div >
< div >对< / div >
< / div >
如果你不需要支持IE9及以下版本，你可以使用flexbox来解决这个问题:代码依赖
IE10和11(支持flexbox)也有一些bug，但在本例中不存在
通过使用flex-direction: column将<按钮>和<窗体>包装在容器中，可以垂直对齐它们。元素的源顺序将是它们从上到下显示的顺序，所以我重新排列了它们。
然后，您可以将窗体和按钮容器与画布水平对齐，方法是使用flex-direction: row将它们包装在容器中。同样，元素的源顺序将是它们从左到右显示的顺序，所以我重新排序了它们。
此外，这将要求您从问题中链接的代码中删除所有的位置和浮动样式规则。
下面是上面链接的代码依赖中的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;
}
这个问题的其他答案不是很好，因为float:right可以到父div之外(溢出:隐藏为父有时可能会有帮助)和margin-left: auto, margin-right: 0对我来说，在复杂的嵌套div中不起作用(我没有调查为什么)。
我已经发现，对于某些元素text-align: right可以工作，假设当元素和父元素都是内联或内联块时，这可以工作。
注意: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小提琴。
