按钮浮动放置在父div下方
按钮浮动放置在父div下方
提问于 2012-06-28 01:48:01
给定这个简化的代码片段：
<html>
<body>
<div>
<div style='text-align:center;'>asdfaskjdfakjsd</div>
<div style='float:right'>
<input type='submit' value='asdf' />
</div>
</div>
</body>
</html>按钮向右浮动，但在文本下方(在下一行)。我知道我可以使用相对定位重新对齐它，但是有没有一种正确的方法将两者放在同一行上。
如果添加右边的按钮不会影响文本的中心对齐，那就更好了。它不会被推到左边。
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-06-28 01:55:33
我为我跳来跳去道歉。我注意到，即使使用颠倒的div，文本也不会完全居中。
这是另一个解决方案(第五个例子)：http://jsfiddle.net/tracyfu/zYzqr/
#method5 {
position: relative;
}
#method5 .submit {
position: absolute;
right: 0;
top: 0;
}唯一的问题是，如果你不小心，或者你的文本是动态的，它可能会与绝对定位的提交冲突。
Stack Overflow用户
发布于 2012-06-28 01:52:23
您可以切换两个div的顺序：
<div style='float:right'>
<input type='submit' value='asdf' />
</div>
<div>asdfaskjdfakjsd</div>只要你不介意它们的顺序颠倒。
下面是一个演示此效果的fiddle。第四个示例显示了颠倒的div。
Stack Overflow用户
发布于 2012-06-28 01:49:22
我第一次误解了你的问题。您应该在初始目录中添加float:left;，并确保将clear:both;添加到它们下面的目录中。如果希望文本居中，则需要在初始div上设置宽度。
HTML
<div id="container">
<div id="content">
asdfaskjdfakjsd
</div>
<div id="containerButton">
<input type='submit' value='asdf' />
</div>
</div>
<div class="clear">asdfaskjdfakjsd</div>CSS：
#container {
width:300px;
}
#content {
float:left;
text-align:center;
width:90%;
}
#containerButton {
text-align:right;
}
.clear {
clear:both;
}Live DEMO
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11232119
复制相关文章
相似问题
腾讯云开发者
