如何将 <h3> 和 <button> 元素并排放置

Question

我想弄清楚如何将我的<h4>标签和<button标签并排放置。

当前行为- 现在它们在我的图像下方，我希望它们处于水平位置。

必需的行为- 我希望<h4>与图像<button>并排，并与<h4>.

我尝试向右浮动并显示块，但元素仍然在图像下方且彼此之间。

代码笔链接

Answer 1

默认情况下，浏览器通常将标题元素显示为block. 习惯inline-block不让它在它自己的行中。

HTML

<h4>title</h4>
<button>button</button>

CSS

h4 {
  display: inline-block;
}

演示：http : //codepen.io/anon/pen/bVPXOK