我如何右对齐div元素?

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

当前回答

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

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

2019-08-28 10:49:02

其他回答

如果你有多个div，你想并排对齐在父div的右端，设置text-align: right;在父div上。

2016-11-24 02:55:32

也许只是:

  margin: auto 0 auto auto;

2020-11-18 22:23:12

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

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

2019-06-10 16:48:08

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

2011-10-07 21:58:58

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

2016-11-11 19:30:43

我如何右对齐div元素?

推荐文章

最新文章

标签