如何将div元素右对齐？

Question

更多

资料来源非AMP版本编辑

如何将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="1000" height="600">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>

<！--结束片段--&gt。

MJN Belief

已编辑的问题 4日二月 2018 в 9:55

编程

html5 css

7日十月 2011 в 9:54

30 种观点

pstanton

资料来源非AMP版本编辑

浮动是可以的，但在ie6 & 7上有问题。

我更倾向于在内部div上使用margin-left:auto; margin-right:0;。

pstanton