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

小编典典

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

css

如何对齐两个内联块，以便一个在左边，另一个在同一行？为什么这么难？是否有类似LaTeX的\ hfill这样的东西可以占用它们之间的空间来实现这一目标？

我不想使用浮点数，因为有了内联块，我可以将基线对齐。当窗口对于两个窗口都太小时，可以使用内联块将文本对齐方式更改为居中，并且它们将居中放置在另一个之上。相对（父）+绝对（元素）定位与浮点数存在相同的问题。

The HTML5:

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

The 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右侧。

阅读 289

2020-05-16

共1个答案

小编典典

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

Flexbox

到目前为止，它是最短且最灵活的。适用display: flex;于父容器，并通过调整其对儿童的安置justify-content: space-between;是这样的：

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

但是请注意，flexbox支持是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;
}

2020-05-16