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

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

HTML5：

Title

A Link

Another Link

A Third Link

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。

AFAIK解决此问题的唯一方法是使用浮动或绝对定位。 您可以使用导航上的margin-top获得相同的基线位置。

只需使用margin-top和float。 没有那种定位或绝对定位就不可能做到这一点。

使用css媒体查询可根据视口的大小更改css。 您可以同时使用position: absolute和inline-block

编辑：自从我回答这个问题以来已经过去了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或更早版本，请使用以下解决方案：

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中的内联块元素未用空格分隔，则此解决方案将不起作用-请参见示例http://jsfiddle.net/NfeVh/1408/。当您使用Java脚本插入内容时，可能是这种情况。

如果我们不在乎IE7，则只需省略star-hack属性。使用标记的工作示例在此处-http://jsfiddle.net/skip405/NfeVh/5/。我只添加了header:after部分并说明了内容。

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

有什么方法可以阻止它提高横幅的高度吗？我意识到这是如何工作的，所以我认为这里没有。

此解决方案非常优雅，而且足够高，这不是解决方法吗？它恰好增加了20个无用的像素:-(编辑：可能的解决方法，指定高度：NUMpx;在容器上，由于多种原因，这是非常糟糕的。

如果您使用javascript生成内容，请注意，仅当元素之间存在空格时，此解决方案才有效。您将需要在left / right元素之间插入一个文本节点，否则它们都将粘在左边。

@Valerio Coltr，我找到了解决此小问题的方法。如果将font-size: 1px设置为父容器，则多余的空间实际上将消失。只是现在，我们必须将子元素的font-size设置回正常状态-像这样：jsfiddle.net/skip405/NfeVh/326

您还可以将代码粘贴到这里吗？链接到外部场所的习惯有时会死掉，如果发生这种情况，那么本来有用的答案将突然变得无用。

@ValerioColtr我同意空白空间是这种方法中最令人讨厌的东西。显式管理font-size是相当不可取的。我提出了一个不同的解决方案。请注意，.header:after装饰器添加的一行高度等于font-size。幸运的是，我们知道那是多少。正是1em！因此，负利润可助您一臂之力！这个小提琴显示了如何。

我正在尝试在Firefox中执行类似操作，但无法正常工作。我发生两件事：1.不是正确的CSS选择器:: after，不是：after？ 2. :: after选择器将内容而不是元素插入页面。如果内容不是元素，如何设置内容的宽度？无论如何，似乎正在为一些工作，但林困惑。

"所有支持双冒号(：:) CSS3语法的浏览器也仅支持(:)语法，但IE 8仅支持单冒号" css-tricks.com/almanac/selectors/a/after-and-before

@ skip405注意：将包装元素(标题)上的行高设置为0并修复其伪元素的垂直对齐方式(vertical-align：top，例如)可以解决额外的空间问题。当然，我们必须在父元素上重新设置行高，但是在许多情况下它可能更容易。 jsfiddle.net/bencergazda/3gL8153n/7

@bencergazda，很酷，谢谢:)

@ skip405如果我正确阅读了问题，OP希望两个子项都在同一基线上对齐。也许您想考虑将此添加到您的答案中？放在这里：jsfiddle.net/c4pwtn5o-基本上是在.header上添加align-items: baseline;。

@JanPapenbrock，感谢您的建议。它确实在OP图像上看起来元素在同一基线上。但是，问题本身不在于垂直对齐。编辑被拒绝(顺便说一句，我拒绝)

@JanPapenbrock，更重要的是，OP明确表示可以line up the baselines。它能回答您的编辑为何被拒绝的原因吗？没有恶意？

我个人并不喜欢这种改进；-)我只是发现自己需要调整为基准-从问题图像中我还认为这也是OP的需要。 因此，我认为这将是一个很好的补充。 关于编辑和拒绝的原因，我知道这是形式问题(应该评论而不是编辑)而不是内容。

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

如果您不想使用浮点数，则必须包装导航：

Title

A Link

Another Link

A Third Link

...并添加一些更具体的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;

}

您可能需要做更多一点，但这只是一个开始。

我认为对此的一种可能的解决方案是使用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/

如果您已经在屏幕过小时(根据标题的注释)使用JavaScript来使内容居中，那为什么不只是在使用JavaScript时撤消浮点数/边距，然后正常使用浮点数和边距。

您甚至可以使用CSS媒体查询来减少使用的JavaScript数量。

我想我还没有真正考虑过，似乎这样会更容易。但显然不是。关于我如何从javascript跳转到下一行的导航的任何提示？

啊，我可以使用媒体查询！我认为这些仅用于启动，而不用于调整大小。谢谢。

正确对齐项目的新方法：

网格：

.header {

display:grid;

grid-template-columns: 1fr auto;

}

演示

Bootstrap 4.右对齐：

left

element needs to be right aligned

演示

两种元素都使用

display: inline-block;

用于" nav"元素

float: right;

对于浮子，不能使用自动换行。

给它float：right和h1 float：left并在它们之后放置一个带有clear：的元素。

"我不想使用浮子"

@powerbuoy有趣，他选择了最后带有浮点数的解决方案，对吗？

@意大利：只是因为我认为这是唯一可能的方法，所以我改变了我接受的答案。