如何右对齐div元素？ [英] How do I right align div elements?
问题描述
我的HTML文档的正文包含3个元素，一个按钮，一个窗体和一个画布。我想让按钮和窗体右对齐，画布保持左对齐。问题是，当我尝试对齐前两个元素，他们不再相互跟随，而是彼此相邻水平？，继承我迄今为止的代码，我想要的形式，直接跟随右边的按钮之间没有空格。
The body of my html document consists of 3 elements, a button, a form, and a canvas. I want the button and the form to be right aligned and the canvas to stay left aligned. The problem is when I try to align the first two elements, they no longer follow each other and instead are next to each other horizontally?, heres the code I have so far, I want the form to follow directly after the button on the right with no space in between.
<!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>
并继承我现在的css
and heres my css as of now
#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;
}
推荐答案
包含形式&按钮，然后通过设置 float：right; 使div浮动到右边。
You can make a div that contains both the form & the button, then make the div float to the right by setting float: right;.
这篇关于如何右对齐div元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
