html - inline-block 两个文本，一个在左边，一个在右边

Question

代码如下:

<header>
    <h1>Title</h1>
    <h2>Subtitle</h2>
</header>

有没有一种方法可以让 h1 左对齐，h2 右对齐，只使用内联，没有 float ，没有绝对定位？我试过:

header {
    width: 100%;
}

header h1 {
    display: inline-block;
    text-align:left;    
}

header h2 {
    display: inline-block;
    text-align: right;    
}

运气不好:http://codepen.io/Gasimzada/pen/qFolb

Answer 1

给他们一些宽度尺寸!如果没有，inline-block 元素将默认为内容的确切宽度。

header {
    width: 100%;
}

header h1 {
    display: inline-block;
    width: 49%; /* 50% might be suitable; codepen bumped to next line at 50-50 */
    text-align:left;    
}

header h2 {
    display: inline-block;
    width: 50%;
    text-align: right;    
}

http://codepen.io/anon/pen/tBfHm