我的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>pst*_*ton 419
花车是好的,但ie6和7有问题.
我更喜欢margin-left:auto; margin-right:0;在内部div上使用.
van*_*con 274
您可以创建一个包含表单和按钮的div,然后通过设置使div浮动到右侧float: right;.
Mic*_*she 151
老答案.更新:使用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>Mla*_*vic 28
这个问题的其他答案并不是那么好,因为float:right可以超出父div(溢出:隐藏为父有时可能会有帮助),margin-left: auto, margin-right: 0对我来说,在复杂的嵌套div中不起作用(我没有调查原因).
我已经发现,对于某些元素text-align: right有效,假设当元素和父元素都是inline或时,它可以工作inline-block.
注意:text-alignCSS属性描述了像文本这样的内联内容如何在其父块元素中对齐.text-align不控制块元素本身的对齐,只控制它们的内联内容.
一个例子:
<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
<div style="display: block; width: 100%">
I'm parent
</div>
<div style="display: inline-block; text-align: right; width: 100%">
Caption for parent
</div>
</div>
rnw*_*ser 11
有时 float: left 会导致设计问题，在这种情况下，您可以像这样使用 display flex ：
.right {
display: flex;
justify-content: flex-end;
margin-left: auto;
margin-right: 0;
}<div>
<div class="right">Right</div>
</div>也许只是：
margin: auto 0 auto auto;
简单的答案在这里：
<div style="text-align: right;">
anything:
<select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
</select>
</div>
一种方法是为那些需要向右拉动的元素设置一个父 div (float: right ;)，然后按照下面示例中所示的方式执行其余操作，使它们右对齐：
.parent-div {
display: flex;
float: right;
background: yellow;
padding: 10px;
}
/*Below: child-div styling is not needed for this purpose! this is just for demonstration:*/
.child-div {
text-align: center;
background-color: powderblue;
margin: auto 10px;
height: 100px;
width: 50px;
}<div class="">CANVAS div </div>
<div class="parent-div">
<div class="child-div">child 1</div>
<div class="child-div">child 2</div>
<div class="child-div">...</div>
<div class="child-div">child n</div>
</div>小智 5
您可以使用flexboxwith flex-grow将最后一个元素推到右侧。
<div style="display: flex;">
<div style="flex-grow: 1;">Left</div>
<div>Right</div>
</div>
| 归档时间： |
|
| 查看次数： |
826083 次 |
| 最近记录： |