在同一行上左右对齐两个行内块 [英] Align two inline-blocks left and right on same line

问题描述

如何对齐两个内联块，使一个在左边，另一个在同一行？为什么这么难？有什么像LaTeX的\ hfill可以消耗它们之间的空间来实现这一点？

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?

我不想使用浮动使用inline-blocks我可以排列基线。当窗口对于它们都太小时，使用inline-blocks我可以将text-align改为center，并且它们将以另一个为中心。相对（父）+绝对（元素）定位与浮动相同的问题。

I don't want to use floats because 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.

HTML5：

<header>
    <h1>Title</h1>
    <nav>
        <a>A Link</a>
        <a>Another Link</a>
        <a>A Third Link</a>
    </nav>
</header>

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是紧挨着的，但我想要 nav 。

Thery're right next to each other, but I want the nav on the right.

推荐答案

编辑：3年问题，我想有一个更现代的解决方案是需要的，虽然当前一个做的事情：）

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 :)

1. Flexbox

这是迄今为止最短，最灵活。将 display：flex; 应用于父容器，并通过 justify-content：space-between; 像这样：

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:

.header {
    display: flex;
    justify-content: space-between;
}

在这里可以看到 - http://jsfiddle.net/skip405/NfeVh/1073/

Can be seen online here - http://jsfiddle.net/skip405/NfeVh/1073/

但请注意， Flexbox支持是IE10及更高版本。如果您需要支持IE 9或更早版本，请使用以下解决方案：

Note however that flexbox support is IE10 and newer. If you need to support IE 9 or older, use the following solution:

2.您可以使用 text-align：justify 技巧。

2.You can use the text-align: justify technique here.

.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;
}

工作示例可以在这里看到： http://jsfiddle.net/skip405/NfeVh/4/ 。此代码适用于IE7及以上版本

The working example can be seen here: http://jsfiddle.net/skip405/NfeVh/4/. This code works from IE7 and above

如果HTML中的inline-block元素不是用空格分隔，则此解决方案将无法正常工作 - 参见示例 http://jsfiddle.net/NfeVh/1408/ 。这可能是您使用Javascript插入内容时的情况。

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.

如果我们不关心IE7，只需忽略star-hack属性。使用您的标记的工作示例在这里 - http://jsfiddle.net/skip405/NfeVh/5/ 。我只是添加标题：后面的部分和对齐内容。

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:after part and justified the content.

为了解决额外的问题用之后插入 c>伪元素的空格可以将 font-size 设置为0父元素并将其重置为对于子元素说14px。这个伎俩的工作示例可以在这里看到： http://jsfiddle.net/skip405/NfeVh/ 326 /

In order to solve the issue of the extra space that is inserted with the after pseudo-element one can do a trick of setting the font-size to 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/

这篇关于在同一行上左右对齐两个行内块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！