Html 如何在不使用浮动的情况下左/右对齐 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8794778/
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
How do you align left / right a div without using float?
提问by NullVoxPopuli
When doing something like this:
当做这样的事情时：
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
I have to use an empty div with
我必须使用一个空的 div
clear: both;
which feels very dirty to me.
这对我来说感觉很脏。
So, is there a way to align without the use of float?
那么，有没有办法在不使用浮动的情况下对齐？
Here is my code:
这是我的代码：
.action_buttons_header a.green_button{
}<div class="change_requests_container" style="width:950px !important">
<div class="sidebar">
<a href="/view/preview_unpublished_revision/422?klass=Proposal" class="preview sidebar_button_large action_button" name="preview" onclick="window.open(this.href);return false;">Preview New Version</a>
</div>
<div class="content_container">
<div class="content">
<div class="action_buttons_header">
<a href="/changes/merge_changes/422" class="re_publish publish green_button" style="
margin: 5px 0px 5px auto;
">Apply Changes</a>
</div>
<div id="change_list_container">
<div class="changes_table">
<style type="text/css">
#original_492 .rl_inline_added {
display: none;
}
#492.change_container .actial_suggested_text_container{
display: none;
}
</style>
<div class="content_section_header_container">
<div class="content_section_header">
<a href="#" class="collapse" name="492"></a>
The Zerg |
Overview
<div class="status" id="492_status">
<div id="492_status_placeholder">
</div>
</div>
</div>
</div>
<div class="change_container" id="492">
</div>
</div>
</div>
</div>I want the green button on the right of the horizontal bar that it's in but in the cleanest way possible.
我想要它所在的单杠右侧的绿色按钮，但要以最干净的方式。
Just trying to learn how to do CSS elegantly, cleanly, etc.
只是想学习如何优雅、干净地使用 CSS，等等。
采纳答案by DCNYAM
In you case here, if you want to right-align that green button, just change the one div to have everything right-aligned:
在您的情况下，如果您想右对齐那个绿色按钮，只需更改一个 div 以使所有内容右对齐：
<div class="action_buttons_header" style="text-align: right;">
The div is already taking up the full width of that section, so just shift the green button the right by right-aligning the text.
div 已经占据了该部分的全部宽度，因此只需通过右对齐文本将绿色按钮向右移动。
回答by myrcutio
Another way to do something similar is with flexbox on a wrapper element, i.e.,
另一种做类似事情的方法是在包装元素上使用 flexbox，即，
.row {
display: flex;
justify-content: space-between;
} <div class="row">
<div>Left</div>
<div>Right</div>
</div>
回答by Chris James Champeau
you could use things like display: inline-blockbut I think you would need to set up another div to move it over, if there is nothing going to the left of the button you could use margins to move it into place.
你可以使用类似的东西，display: inline-block但我认为你需要设置另一个 div 来移动它，如果按钮左侧没有任何东西，你可以使用边距将它移动到位。
Alternatively but not a good solution, you could position tags; put the encompassing div as position: relativeand then the div of the button as position: absolute; right: 0, but like I said this is probably not the best solution
或者，但不是一个好的解决方案，您可以放置标签；把包含的 divposition: relative和按钮的 div 放在 as position: absolute; right: 0，但就像我说的，这可能不是最好的解决方案
HTML
HTML
<div class="parent">
<div>Left Div</div>
<div class="right">Right Div</div>
</div>
CSS
CSS
.parent {
position: relative;
}
.right {
position: absolute;
right: 0;
}
回答by PeeHaa
It is dirty better use the overflow: hidden;hack:
使用overflow: hidden;hack比较脏：
<div class="container">
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
</div>
.container { overflow: hidden; }
Or if you are going to do some fancy CSS3 drop-shadow stuff and you get in trouble with the above solution:
或者，如果您打算做一些花哨的 CSS3 阴影效果，但在上述解决方案中遇到了麻烦：
PS
聚苯乙烯
If you want to go for clean I would rather worry about that inline javascript rather than the overflow: hidden;hack :)
如果你想干净，我宁愿担心内联 javascript 而不是overflow: hidden;hack :)
回答by Micka?l R.
Another solution could be something like following (works depending on your element's display property):
另一种解决方案可能类似于以下内容（取决于您元素的显示属性）：
HTML:
HTML：
<div class="left-align">Left</div>
<div class="right-align">Right</div>
CSS:
CSS：
.left-align {
margin-left: 0;
margin-right: auto;
}
.right-align {
margin-left: auto;
margin-right: 0;
}
回答by josh.thomson
You could just use a margin-left with a percentage.
您可以只使用带有百分比的 margin-left 。
HTML
HTML
<div class="goleft">Left Div</div>
<div class="goright">Right Div</div>
CSS
CSS
.goright{
margin-left:20%;
}
.goleft{
margin-right:20%;
}
(goleft would be the same as default, but can reverse if needed)
（goleft 与默认值相同，但如果需要可以反转）
text-align doesn't always work as intended for layout options, it's mainly just for text. (But is often used for form elements too).
text-align 并不总是按预期的方式用于布局选项，它主要用于文本。（但也常用于表单元素）。
The end result of doing this will have a similar effect to a div with float:right; and width:80% set. Except, it won't clump together like a float will. (Saving the default display properties for the elements that come after).
这样做的最终结果将与带有 float:right; 的 div 产生类似的效果。和宽度：80% 设置。除了，它不会像浮动一样聚集在一起。（为后面的元素保存默认显示属性）。
回答by John
No need to add extra elements. While flexbox uses very non-intuitive property names if you know what it cando you'll find yourself using it quite often.
无需添加额外的元素。虽然 flexbox 使用非常不直观的属性名称，如果您知道它可以做什么，您会发现自己经常使用它。
<div style="display: flex; justify-content: space-between;">
<span>Item Left</span>
<span>Item Right</span>
</div>
Plan on needing this often?
计划经常需要这个？
.align_between {display: flex; justify-content: space-between;}
I see other people using secondary words in the primary position which makes a mess of information hierarchy. If alignis the primary task and right, left, and/or betweenare the secondary the class shouldbe .align_outer, not.outer_alignas it will make sense as you vertically scan your code:
我看到其他人在主要位置使用次要词，这使信息层次结构变得一团糟。如果对齐是首要任务，右，左，和/或之间是次要的类应该是.align_outer，不是.outer_align因为它将使意义，因为你垂直扫描。您的代码：
.align_between {}
.align_left {}
.align_outer {}
.align_right {}
Good habits over time will allow you to get to bed sooner than later.
随着时间的推移，良好的习惯会让你早点睡觉。
回答by Raphael
Very useful thing have applied today in my project. One div had to be aligned right, with no floating applied.
今天在我的项目中应用了非常有用的东西。一个 div 必须正确对齐，没有应用浮动。
Applying code made my goal achieved:
应用代码实现了我的目标：
.div {
margin-right: 0px;
margin-left: auto;
}
