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

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

1. 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;          *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;         *display: inline;    *zoom: 1;    *text-align: left; }.nav {    display: inline-block;    vertical-align: baseline;        *display: inline;    *zoom:1;    *text-align: right;}