logo标签列表

如何将div元素右对齐？

csshtml
637

我的HTML文档的主体由三个元素组成：一个按钮，一个表单和一个画布。我想要将按钮和表单右对齐，同时保持画布左对齐。问题是当我尝试对齐前两个元素时，它们不再相互跟随，而是水平排列在一起？以下是我目前的代码，我希望表单直接跟在按钮右边，没有间隙。

#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>

17个回答
4

如果你正在使用Bootstrap：

<div class="pull-right"></div>
1
我认为你的意思是 <div class="text-right"></div>。 - Alex Barker
4
Anil并没有错，class为"pull-right"会产生"float: right;"的效果（在Bootstrap 3.4.1中测试过）。 - Fabian Horlacher
4

一种方法是为那些需要被右对齐的元素设置一个父级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>

3
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>

如果我没错的话，你也可以改为 justify-content: end; 这样就不需要空的 emptyDiv 元素了。 - Niels Lucas
是的，另一个答案已经提到了“yes flex end”，但没有一个答案提到了这种方法。这种方法的优点是，如果您想添加更多元素，只要它是其父元素的最后一个子元素，并且在行中有足够的空间，它就不会影响“我在右边”的div的位置。 - Jevon
2
如果您不需要支持IE9及以下版本，您可以使用flexbox来解决这个问题：codepen。IE10和11存在一些错误（flexbox支持），但在此示例中不存在。
您可以通过将它们放在具有flex-direction: column的容器中来垂直对齐<button>和<form>。元素的源顺序将从上到下显示，因此我重新排序了它们。
然后，您可以通过将它们包装在具有flex-direction: row的容器中来水平对齐表格和按钮容器。同样，元素的源顺序将从左到右显示，因此我重新排序了它们。
另外，这需要您从问题链接的代码中删除所有position和float样式规则。
以下是上面链接的codepen中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;
}
0
您可以使用padding-left:60%（例如）将内容对齐到右侧，并同时将内容包装在响应式容器中（在我的情况下，我需要导航栏），以确保它适用于所有示例。
-2

您可以通过添加以下CSS轻松实现此操作： （适用于IE11）

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

2
除非您知道要右对齐的每个元素的确切宽度，否则此方法无法正常工作。这种解决方案极其脆弱，几乎不切实际。 - TylerH
-15
我知道这是一个旧帖子，但你不可以使用<div id=xyz align="right">来设置右对齐吗？
你只需要将right替换为left、center和justify。
在我的网站上运行良好:)
24
请勿使用HTML属性来格式化您的页面，这正是CSS所用的。实际上，align属性已经被弃用了。请注意保持原文意思并使其更加通俗易懂。 - Hanna
4
因此，像这样的问题的原因及其需要被回答，是因为旧方法不再奏效。 - vapcguy
哦哦哦，这么多负面)) - Nessi
谢谢您的回答！我一直在想为什么 align="right" 是错误的，而你提到了它，还有人以评论的形式提供了一个扎实的反驳答案 :) - Prid
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接