Html CSS 浮动右侧无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19092014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS float right not working correctly
提问by Oliver Watkins
My right float is not working how i expect it to.
我的右侧浮动无法按我的预期工作。
I want my button nicely aligned to the right of my text above a line :
我希望我的按钮很好地与我的文本右侧对齐：
<div style="padding: 5px; border-bottom-width: 1px; border-bottom-color: gray; border-bottom-style: solid;">
My Text
<button type="button" class="edit_button" style="float: right; margin:5px;">My Button</button>
</div>
However it always seems to hover over the line.
然而，它似乎总是悬停在线上。
If I increase the padding or margin of the DIV then the button on the right still seems to be pushed over the line at the bottom.
如果我增加 DIV 的填充或边距，则右侧的按钮似乎仍然被推到底部的线上。
I have tried to play around with paddings and margins of the button on the right, but i can't seem to get it to be placed neatly next to the text.
我曾尝试使用右侧按钮的填充和边距，但我似乎无法将其整齐地放置在文本旁边。
Fiddle is here:
小提琴在这里：
Many thanks
非常感谢
采纳答案by smikulic
you need to wrap your text inside div and float it left while wrapper div should have height, and I've also added line height for vertical alignment
您需要将文本包装在 div 中并将其向左浮动，而包装 div 应该具有高度，并且我还添加了行高以进行垂直对齐
<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
<div style="float:left;line-height:30px;">Contact Details</div>
<button type="button" class="edit_button" style="float: right;">My Button</button>
</div>
also js fiddle here =) http://jsfiddle.net/xQgSm/
这里还有 js 小提琴 =) http://jsfiddle.net/xQgSm/
回答by Marc Audet
Here is one way of doing it.
这是一种方法。
If you HTML looks like this:
如果你的 HTML 看起来像这样：
<div>Contact Details
<button type="button" class="edit_button">My Button</button>
</div>
apply the following CSS:
应用以下 CSS：
div {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: gray;
overflow: auto;
}
.edit_button {
float: right;
margin: 0 10px 10px 0; /* for demo only */
}
The trick is to apply overflow: autoto the div, which starts a new block formatting context. The result is that the floated button is enclosed within the block area defined by the divtag.
关键是要申请overflow: auto到div，开始新的块格式化的内容。结果是浮动按钮被包围在div标签定义的块区域内。
You can then add margins to the button if needed to adjust your styling.
然后，如果需要调整样式，您可以为按钮添加边距。
In the original HTML and CSS, the floated button was out of the content flow so the border of the divwould be positioned with respect to the in-flow text, which does not include any floated elements.
在最初的 HTML 和 CSS 中，浮动按钮位于内容流之外，因此 的边框div将相对于不包含任何浮动元素的流入文本进行定位。
See demo at: http://jsfiddle.net/audetwebdesign/AGavv/
回答by searching9x
Verry Easy, change order of element:
非常简单，改变元素的顺序：
Origin
起源
<div style="">
My Text
<button type="button" style="float: right; margin:5px;">
My Button
</button>
</div>
Change to:
改成：
<div style="">
<button type="button" style="float: right; margin:5px;">
My Button
</button>
My Text
</div>
回答by Falguni Panchal
LIke this
像这样
css
css
h2 {
border-bottom-width: 1px;
border-bottom-style: solid;
margin: 0;
padding: 0;
}
.edit_button {
float: right;
}
css
css
h2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: gray;
float: left;
margin: 0;
padding: 0;
}
.edit_button {
float: right;
}
html
html
<h2>
Contact Details</h2>
<button type="button" class="edit_button" >My Button</button>
html
html
<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray; float:left;">
Contact Details
</div>
<button type="button" class="edit_button" style="float: right;">My Button</button>
回答by Falguni Panchal
You have not used float:leftcommand for your text.
您尚未float:left对文本使用命令。
