在同一行左右对齐两个内联块

Question

如何对齐两个内联块,使一个在左边,另一个在同一条线上？为什么这么难？是否有类似LaTeX的\ hfill可以消耗它们之间的空间来实现这一目标？

我不想使用浮点数,因为使用内联块我可以排列基线.当窗口对于它们都太小时,使用内联块我可以将文本对齐更改为居中,并且它们将在另一个上面居中.相对(父)+绝对(元素)定位与浮点数具有相同的问题.

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在右边.

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支持是IE10及更新版本.如果您需要支持IE 9或更早版本,请使用以下解决方案:

你可以在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中的inline-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/

Answer 2

对于这两个元素都使用

display: inline-block;

用于“nav”元素的使用

float: right;

Answer 3

利用@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; 
    }
}

它接受 3 个参数。容器，左右元素。例如，为了适合这个问题，您可以像这样使用它：

@include inline-block-lr('header', 'h1', 'nav');