如何正确对齐div元素？

小编典典

如何正确对齐div元素？

css

我的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>

阅读 324

2020-05-16

共1个答案

小编典典

您可以创建一个同时包含表单和按钮的div，然后通过设置将div浮动到右侧float: right;。

2020-05-16