Html 在同一行左右对齐两个行内块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10272605/
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
Align two inline-blocks left and right on same line
提问by mk12
How can I align two inline-blocks so that one is left and the other is right on the same line? Why is this so hard? Is there something like LaTeX's \hfill that can consume the space between them to achieve this?
如何对齐两个内联块，使一个在左，另一个在同一行上？为什么这么难？有没有像 LaTeX 的 \hfill 这样的东西可以消耗它们之间的空间来实现这一点？
I don't want to use floatsbecause with inline-blocks I can line up the baselines. And when the window is too small for both of them, with inline-blocks I can just change the text-align to center and they will be centered one atop another. Relative(parent) + Absolute(element) positioning has the same problems as floats do.
我不想使用浮点数，因为使用内联块我可以排列基线。当窗口对他们两个来说都太小时，使用内联块我可以将 text-align 更改为居中，它们将一个一个地居中。相对（父）+ 绝对（元素）定位与浮动有同样的问题。
The HTML5:
HTML5：
<header>
<h1>Title</h1>
<nav>
<a>A Link</a>
<a>Another Link</a>
<a>A Third Link</a>
</nav>
</header>
The css:
css：
header {
//text-align: center; // will set in js when the nav overflows (i think)
}
h1 {
display: inline-block;
margin-top: 0.321em;
}
nav {
display: inline-block;
vertical-align: baseline;
}
Thery're right next to each other, but I want the navon the right.
他们就在彼此旁边，但我想要nav右边的。
回答by skip405
Edit:3 years has passed since I answered this question and I guess a more modern solution is needed, although the current one does the thing :)
编辑：自从我回答这个问题以来已经过去了 3 年，我想需要一个更现代的解决方案，尽管目前的解决方案可以做到这一点:)
1.Flexbox
1.弹性盒
It's by far the shortest and most flexible. Apply display: flex;to the parent container and adjust the placement of its children by justify-content: space-between;like this:
它是迄今为止最短和最灵活的。应用display: flex;到父容器并通过justify-content: space-between;如下方式调整其子容器的位置：
.header {
display: flex;
justify-content: space-between;
}
Can be seen online here - http://jsfiddle.net/skip405/NfeVh/1073/
可以在这里在线查看 - http://jsfiddle.net/skip405/NfeVh/1073/
Note however that flexbox supportis IE10 and newer. If you need to support IE 9 or older, use the following solution:
但是请注意flexbox 支持是 IE10 和更新版本。如果您需要支持 IE 9 或更早版本，请使用以下解决方案：
2.You can use the text-align: justifytechnique here.
2.您可以在text-align: justify这里使用该技术。
.header {
background: #ccc;
text-align: justify;
/* ie 7*/
*width: 100%;
*-ms-text-justify: distribute-all-lines;
*text-justify: distribute-all-lines;
}
.header:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
h1 {
display: inline-block;
margin-top: 0.321em;
/* ie 7*/
*display: inline;
*zoom: 1;
*text-align: left;
}
.nav {
display: inline-block;
vertical-align: baseline;
/* ie 7*/
*display: inline;
*zoom:1;
*text-align: right;
}
The working example can be seen here: http://jsfiddle.net/skip405/NfeVh/4/. This code works from IE7 and above
可以在这里看到工作示例：http: //jsfiddle.net/skip405/NfeVh/4/。此代码适用于 IE7 及更高版本
If inline-block elements in HTML are not separated with space, this solution won't work - see example http://jsfiddle.net/NfeVh/1408/. This might be a case when you insert content with Javascript.
如果 HTML 中的 inline-block 元素没有用空格分隔，则此解决方案将不起作用 - 请参见示例http://jsfiddle.net/NfeVh/1408/。这可能是您使用 Javascript 插入内容时的情况。
If we don't care about IE7 simply omit the star-hack properties. The working example using your markup is here - http://jsfiddle.net/skip405/NfeVh/5/. I just added the header:afterpart and justified the content.
如果我们不关心 IE7，只需省略 star-hack 属性。使用您的标记的工作示例在这里 - http://jsfiddle.net/skip405/NfeVh/5/。我刚刚添加了header:after部分并证明了内容。
In order to solve the issue of the extra space that is inserted with the afterpseudo-element one can do a trick of setting the font-sizeto 0 for the parent element and resetting it back to say 14px for the child elements. The working example of this trick can be seen here: http://jsfiddle.net/skip405/NfeVh/326/
为了解决与after伪元素一起插入的额外空间的问题，可以font-size将父元素的 设置为 0 并将其重置为 14px 的子元素。这个技巧的工作示例可以在这里看到：http: //jsfiddle.net/skip405/NfeVh/326/
回答by Pablo S G Pacheco
Taking advantage of @skip405's answer, I've made a Sass mixin for it:
利用@skip405 的回答，我为它制作了一个 Sass mixin：
@mixin inline-block-lr($container,$left,$right){
#{$container}{
text-align: justify;
&:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
}
#{$left} {
display: inline-block;
vertical-align: middle;
}
#{$right} {
display: inline-block;
vertical-align: middle;
}
}
It accepts 3 parameters. The container, the left and the right element. For example, to fit the question, you could use it like this:
它接受 3 个参数。容器，左右元素。例如，为了适合这个问题，您可以像这样使用它：
@include inline-block-lr('header', 'h1', 'nav');
回答by maiorano84
If you don't want to use floats, you're going to have to wrap your nav:
如果你不想使用浮动，你将不得不包装你的导航：
<header>
<h1>Title</h1>
<div id="navWrap">
<nav>
<a>A Link</a>
<a>Another Link</a>
<a>A Third Link</a>
</nav>
</div>
</header>
...and add some more specific css:
...并添加一些更具体的css：
header {
//text-align: center; // will set in js when the nav overflows (i think)
width:960px;/*Change as needed*/
height:75px;/*Change as needed*/
}
h1 {
display: inline-block;
margin-top: 0.321em;
}
#navWrap{
position:absolute;
top:50px; /*Change as needed*/
right:0;
}
nav {
display: inline-block;
vertical-align: baseline;
}
You may need to do a little more, but that's a start.
您可能需要做更多的工作，但这是一个开始。
回答by jdhartley
If you're already using JavaScript to center stuff when the screen is too small (as per your comment for your header), why not just undo floats/margins with JavaScript while you're at it and use floats and margins normally.
如果您已经在屏幕太小时使用 JavaScript 将内容居中（根据您对标题的评论），为什么不在使用 JavaScript 时使用 JavaScript 撤消浮动/边距并正常使用浮动和边距。
You could even use CSS media queries to reduce the amount JavaScript you're using.
您甚至可以使用 CSS 媒体查询来减少您使用的 JavaScript 数量。
回答by robd
I think one possible solution to this is to use display: table:
我认为一种可能的解决方案是使用display: table：
.header {
display: table;
width: 100%;
box-sizing: border-box;
}
.header > * {
display: table-cell;
}
.header > *:last-child {
text-align: right;
}
h1 {
font-size: 32px;
}
nav {
vertical-align: baseline;
}
JSFiddle: http://jsfiddle.net/yxxrnn7j/1/
JSFiddle：http: //jsfiddle.net/yxxrnn7j/1/
回答by Ievgen Naida
回答by Sammy Aguns
For both elements use
对于这两个元素使用
display: inline-block;
the for the 'nav' element use
'nav' 元素的使用
float: right;
回答by Itay Moav -Malimovka
give it float: right and the h1 float:left and put an element with clear:both after them.
给它 float: right 和 h1 float:left 并在它们后面放一个带有 clear:both 的元素。
