css - 在同一行左右对齐两个行内 block

Question

如何对齐两个行内 block ，使一个在左，另一个在同一行上？为什么这么难？是否有类似 LaTeX 的\hfill 的东西可以消耗它们之间的空间来实现这一点？

我不想使用 float ，因为使用内联 block 我可以排列基线。当窗口对于它们两个来说都太小时，使用内联 block 我可以将文本对齐更改为居中，它们将一个一个地居中。 Relative(parent) + Absolute(element)定位和float一样存在同样的问题。

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

它们紧挨着，但我想要右边的 nav。

Answer 1

编辑:自从我回答这个问题以来已经过去了 3 年，我想需要一个更现代的解决方案，尽管当前的解决方案可以做到这一点:)

1. Flexbox

它是迄今为止最短和最灵活的。将 display: flex; 应用于父容器，并通过 justify-content: space-between; 调整其子容器的位置，如下所示:

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

可在此处在线查看 - http://jsfiddle.net/skip405/NfeVh/1073/

但是请注意 flexbox support是 IE10 和更新版本。如果您需要支持 IE 9 或更早版本，请使用以下解决方案:

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

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

如果 HTML 中的行内 block 元素没有用空格分隔，此解决方案将不起作用 - 参见示例 http://jsfiddle.net/NfeVh/1408/ .当您使用 Javascript 插入内容时可能会出现这种情况。

如果我们不关心 IE7，只需省略 star-hack 属性即可。使用您的标记的工作示例在这里 - http://jsfiddle.net/skip405/NfeVh/5/ .我刚刚添加了 header:after 部分并调整了内容。

为了解决用 after 伪元素插入的额外空间的问题，可以做一个技巧，将 font-size 设置为 0父元素并将其重置为子元素为 14px。这个技巧的工作示例可以在这里看到:http://jsfiddle.net/skip405/NfeVh/326/