如何右对齐div元素？
如何右对齐div元素？
提问于 2011-10-08 05:54:05
我的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>
回答 14
Stack Overflow用户
回答已采纳
发布于 2011-10-08 05:58:59
您可以创建一个同时包含表单和按钮的div，然后通过设置float: right;使div向右浮动。
Stack Overflow用户
发布于 2012-09-08 06:21:13
浮动是可以的，但在IE6和7中有问题。
我更喜欢在内部div上使用以下代码：
margin-left: auto;
margin-right: 0;有关原因的说明，请参阅the IE Double Margin Bug。
Stack Overflow用户
发布于 2017-08-27 10:14:18
老生常谈。更新:使用flexbox，现在几乎可以在所有浏览器中使用。
<div style="display: flex; justify-content: flex-end">
<div>I'm on the right</div>
</div>
你还可以变得更花哨，简单地说：
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Right</div>
</div>
更花哨：
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7693224
复制相关文章
相似问题