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