css - 显示内联 block 以正确的方式实现这一点

Question

我有以下 CSS 行:

.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px; 
}

<h2 class="liquid">Liquid</h2>

它应该是这样的: http://imgur.com/B9vblUP

但是看起来像这样: http://imgur.com/8RQTkcO

我在这里做错了什么以及如何让它与第一张图片完全一样？

我尝试 overflow hidden ，但只在方 block 上显示 25x25 的液体，其余部分未显示。

非常感谢任何帮助。

亲切的问候，

魔人布欧

Answer 1

我认为您应该为橙色方 block 创建另一个元素而不是编辑 h2 元素的类，因为它将应用于该元素的背景属性，所以我会做类似的事情:

<div class="liquid"></div>
<h2>Liquid</h2>

.liquid {
  float: left;
  width: 25px;
  height: 25px;
  background: #ff8125;
  margin-right: 15px; 
}

让正方形 float 到元素的左侧。