也许只是:

  margin: auto 0 auto auto;

如果你不需要支持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;
}

你可以简单地添加这样的css: (适用于IE11)

< div > <！减去你的元素宽度——> <span style="margin-left: font - family:宋体">对< / span > < / div >

您可以使用带有flex-grow的flexbox将最后一个元素推到右边。

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

这个问题的其他答案不是很好，因为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小提琴。

如果你正在使用bootstrap，那么:

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