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

1722937 次浏览
小开
最佳答案

你可以创建一个包含&按钮，然后通过设置float: right;使div浮动到右边。

小开

你是说像这样吗?# EYZ0

您可以将float:right和clear:both;属性添加到表单和按钮中

小开

浮动是好的，但问题与ie6 &7.
我更喜欢在内部div上使用以下方法:

margin-left: auto;
margin-right: 0;

请参阅IE的Double Margin Bug以了解原因。

小开

我知道这是一个旧帖子，但你不能用<div id=xyz align="right">来代替吗?

你可以用左、中、右来代替右。

在我的网站工作:)

小开

这个问题的其他答案不是很好，因为float:right可以在父div之外(溢出:隐藏为父有时可能会有帮助)，margin-left: auto, margin-right: 0对我来说不能在复杂的嵌套div中工作(我没有调查为什么)。

我已经发现，对于某些元素text-align: right是有效的，假设当元素和父元素都是inline或inline-block时，这是有效的。

注意: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>

# EYZ0。

小开

如果你不需要支持IE9及以下，你可以使用flexbox来解决这个问题:codepen

IE10和11 (flexbox支持)也有一些bug，但在这个例子中没有

您可以通过将<button>和<form>包装在flex-direction: column的容器中垂直对齐。元素的源顺序将是它们从上到下显示的顺序，所以我重新排列了它们。

然后你可以水平对齐窗体&通过使用flex-direction: row将它们包装在容器中来使用画布按钮容器。同样，元素的源顺序将是它们从左到右显示的顺序，所以我重新排序了它们。

此外，这将要求您从问题中链接的代码中删除所有position和float样式的规则。

下面是上面链接的代码依赖中的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;
}
小开

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

小开

旧的答案。更新:使用flexbox，现在几乎适用于所有浏览器。

<div style="display: flex; justify-content: flex-end">
<div>I'm on the right</div>
</div>

你还可以更花哨，简单地说:

<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Right</div>
</div>

和爱好者:

<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>

小开
你可以简单地使用padding-left:60% (ex)来将你的内容对齐到右侧，同时在响应容器中包装内容(我在我的情况下需要导航栏)

.

.
小开

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

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

您可以使用flexbox和flex-grow将最后一个元素向右推。

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

简单的答案是:

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

也许只是:

  margin: auto 0 auto auto;
小开
你可以简单地添加css: (工作在IE11)

<div>
<!-- Subtract with the amount of your element width -->
<span style="margin-left: calc(100vw - 50px)">Right</span>
</div>

小开

一种方法是为那些需要向右拉的元素设置父div，并像下面的例子中显示的那样做其余的事情，使它们向右对齐:

.parent-div {
display: flex;
float: right;
}




/*Below: child-div styling is not needed for this purpose! this is just for demonstration:*/


.child-div {
text-align: center;
background-color: powderblue;
margin: auto 10px;
height: 100px;
width: 50px;
}
<div class="">CANVAS div </div>
<div class="parent-div">
<div class="child-div">child 1</div>
<div class="child-div">child 2</div>
<div class="child-div">...</div>
<div class="child-div">child n</div>
</div>

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

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

<div style="display: flex; justify-content: space-between;">
<div id="emptyDiv"></div>
<div>I'm on the right</div>
</div>

小开

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

.right {
display: flex;
justify-content: flex-end;
margin-left: auto;
margin-right: 0;
}
<div>
<div class="right">Right</div>
</div>


提交答案