105  

Edit: 3 years has passed since I answered this question and I guess a more modern solution is needed, although the current one does the thing :)

编辑:我回答这个问题已经三年了，我想需要一个更现代的解决方案，尽管目前的方案是这样的:)

1.Flexbox

1. flexbox

It's by far the shortest and most flexible. Apply display: flex; to the parent container and adjust the placement of its children by justify-content: space-between; like this:

它是迄今为止最短、最灵活的。应用显示:flex;对父容器进行调整，并根据其正当性内容:空格;是这样的:

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

Can be seen online here - http://jsfiddle.net/skip405/NfeVh/1073/

在这里可以看到http://jsfiddle.net/skip405/NfeVh/1073/

Note however that flexbox support is IE10 and newer. If you need to support IE 9 or older, use the following solution:

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

2.You can use the text-align: justify technique here.

2。您可以在这里使用“文本对齐”技术。

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

The working example can be seen here: http://jsfiddle.net/skip405/NfeVh/4/. This code works from IE7 and above

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

If inline-block elements in HTML are not separated with space, this solution won't work - see example http://jsfiddle.net/NfeVh/1408/ . This might be a case when you insert content with Javascript.

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

If we don't care about IE7 simply omit the star-hack properties. The working example using your markup is here - http://jsfiddle.net/skip405/NfeVh/5/. I just added the header:after part and justified the content.

如果我们不关心IE7，那就忽略star-hack属性。使用您的标记的工作示例在这里—http://jsfiddle.net/skip405/NfeVh/5/。我只是添加了标题:后部分，并证明内容。

In order to solve the issue of the extra space that is inserted with the after pseudo-element one can do a trick of setting the font-size to 0 for the parent element and resetting it back to say 14px for the child elements. The working example of this trick can be seen here: http://jsfiddle.net/skip405/NfeVh/326/

为了解决在after伪元素中插入额外空间的问题，我们可以使用这样的技巧:将父元素的字体大小设置为0，将子元素的字体大小设置为14px。这个技巧的工作示例可以在这里看到:http://jsfiddle.net/skip405/NfeVh/326/

3  

If you don't want to use floats, you're going to have to wrap your nav:

如果你不想使用浮动，你需要将你的nav包裹起来:

Title

...and add some more specific css:

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

You may need to do a little more, but that's a start.

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

3  

Taking advantage of @skip405's answer, I've made a Sass mixin for it:

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

It accepts 3 parameters. The container, the left and the right element. For example, to fit the question, you could use it like this:

它接受三个参数。容器，左边和右边的元素。例如，为了符合问题，你可以这样使用:

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

1  

If you're already using Javascript to center stuff when the screen is too small (as per your comment for your header), why not just undo floats/margins with Javascript while you're at it and use floats and margins normally.

如果在屏幕太小时，你已经在用Javascript处理中心问题(根据你的标题的注释)，为什么不使用Javascript来撤销浮动/页边距，并且通常使用浮动和页边距。

You could even use CSS media queries to reduce the amount Javascript you're using.

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

0  

give it float: right and the h1 float:left and put an element with clear:both after them.

赋予它float: right和h1 float:left，并在它们后面加上一个clear:both。

0  

I think one possible solution to this is to use display: table:

我认为一个可能的解决方法是使用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/

JSFiddle:http://jsfiddle.net/yxxrnn7j/1/

0  

For both elements use

两个元素使用

display: inline-block;

the for the 'nav' element use

使用“nav”元素

float: right;