當窗口更改大小時，如何將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

這是一種方法：

演示

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