在同一行上左右alignment两个内联块
我怎样才能alignment两个内联块，以便一个是左边的，另一个是在同一条线上？ 为什么这么难？ 有没有像LaTeX的\ hfill可以消耗之间的空间来实现这一目标？
我不想使用浮动，因为使用内联块，我可以排列基线。 而当窗口对于他们两个都太小的时候，使用内嵌块，我可以将文本alignment改为居中，并且它们将居中alignment。 相对（父母）+绝对（元素）定位与浮子相同的问题。
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 。
编辑：我回答了这个问题已经过去了3年，我想现在需要一个更现代的解决scheme，虽然目前的解决scheme:)
1. Flexbox
这是迄今为止最短，最灵活的。 应用display: flex; 到父容器并通过justify-content: space-between;调整子容器的位置justify-content: space-between; 喜欢这个：
.header { display: flex; justify-content: space-between; }
可以在这里看到 – http://jsfiddle.net/skip405/NfeVh/1073/
但请注意， Flexbox支持是IE10和更新的。 如果您需要支持IE 9或更高版本，请使用以下解决scheme：
你可以在这里使用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中的内嵌块元素没有用空格分隔，则此解决scheme将无法工作 – 请参阅示例http://jsfiddle.net/NfeVh/1408/ 。 使用Javascript插入内容时可能会出现这种情况。
如果我们不关心IE7只是简单地省略星际属性。 使用标记的工作示例在这里 – http://jsfiddle.net/skip405/NfeVh/5/ 。 我刚刚添加了header:after部分内容和正确的内容。
为了解决用伪伪元素插入的额外空间的问题，可以做一个把父元素的font-size设置为0的技巧，并将子元素重置为14px。 这个技巧的工作例子可以在这里看到： http : //jsfiddle.net/skip405/NfeVh/326/
如果你不想使用浮动，你将不得不包装你的导航：
<header> <h1>Title</h1> <div id="navWrap"> <nav> <a>A Link</a> <a>Another Link</a> <a>A Third Link</a> </nav> </div> </header>
…并添加一些更具体的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; }
您可能需要做更多一点，但这是一个开始。
利用@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');
如果在屏幕太小时（如根据您对标题的评论），您已经使用JavaScript来集中东西，那么为什么不在JavaScript中使用JavaScript取消浮动/边距，并且正常使用浮动和边距。
你甚至可以使用CSS媒体查询来减less你使用的JavaScript的数量。
给它浮动：右和h1浮动：左和放置一个清晰的元素：在他们之后。
我认为一个可能的解决scheme是使用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/
对于这两个div元素的使用
display: inline-block;
为第二个div元素使用
float: right;
