我如何右对齐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>

当前回答

有时float: left会导致设计问题，在这种情况下，你可以像这样使用display flex:

铃声{ 显示:flex; justify-content: flex-end; margin-left:汽车; margin-right: 0; ｝ < div > < div class = "对" >对< / div > < / div >

2022-06-09 21:49:55

其他回答

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

你是说像这样吗?http://jsfiddle.net/6PyrK/1

你可以添加属性float:right和clear:both;到窗体和按钮

2011-10-07 22:00:14

有时float: left会导致设计问题，在这种情况下，你可以像这样使用display flex:

铃声{ 显示:flex; justify-content: flex-end; margin-left:汽车; margin-right: 0; ｝ < div > < div class = "对" >对< / div > < / div >

2022-06-09 21:49:55

display: flex;
justify-content: space-between;

没有被提及。如果有2个元素(即使其中一个是空div)，它会将一个放在左边，一个放在右边。

< span style=" font - family:宋体;justify-content:之间的空间;" > < div id = " emptyDiv " > < / div > <div>我在右边</div> < / div >

2022-01-30 04:26:18

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

2016-11-24 02:55:32

我如何右对齐div元素?

推荐文章

最新文章

标签