html - 当窗口改变大小时，如何并排对齐 h2 和 div 而不会折叠？

Question

我一直在尝试并排对齐两个元素，一个 h2 和一个 div，而不会在窗口变为较小尺寸时让其中一个元素折叠。我在网上搜索了一下，但没有找到任何类似的东西可以提供帮助，而且我的解决方案也行不通，所以我认为这里有人可以帮助我。

所以我希望它一直这样显示:

https://imagizer.imageshack.us/v2/912x135q90/631/ZYR7sc.png (无法发布图片抱歉!)

但是当窗口大小改变时，尽管 div 应该在某个时候适应它只是中断到下一行:

https://imagizer.imageshack.us/v2/730x144q90/912/yRBpkc.png

这是我的代码:

HTML

<div id='pagetitle'>
    <h2 id='subtitle'>Weapons</h2>
    <div id='hline'></div>
</div>

CSS

#pagetitle { /* This div is for centering both of the elements. */
    width: 90%;
    margin: 0 auto;
    display: block;
}

#subtitle {
    display: inline-block;
    color: #72c9b9;
    font-size: 30px;
    font-weight: 300;
    text-align: center;
}

#hline {
    display: inline-block;
    background-color: #72c9b9;
    width: 70%;
    height: 1px;
    position: relative;
    bottom: 4px;
    margin-left: 20px;
}

就是这样，伙计们，有什么建议吗？提前致谢。

cs.almeida

Answer 1

这里有一个方法:

demo

<div id='pagetitle'>
    <h2 id='subtitle'><span>Weapons</span></h2>
</div>


#pagetitle {
    width: 90%;
    margin: 0 auto;
    display: block;
}

#subtitle {
  border-bottom: #72c9b9 solid 2px;
  height: 18px;
  display: block;
  color: #72c9b9;
  font-size: 30px;
  font-weight: 300;
}

#subtitle > span {
    background-color: white;
    padding: 10px 20px;
}