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

当前回答

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

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

2011-10-07 22:00:14

其他回答

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

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

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

2019-08-28 10:49:02

旧的答案。更新:使用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 >

2017-08-27 02:14:18

简单的答案是:

<div style="text-align: right;">
    anything:
    <select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
    </select>
</div>

2020-01-26 07:53:49

也许只是:

  margin: auto 0 auto auto;

2020-11-18 22:23:12

我如何右对齐div元素?

推荐文章

最新文章

标签