html - CSS - block 对象内嵌在文本旁边

Question

我需要一个展开图标与选项卡中的一段动态文本一起显示更多信息。展开图标有一个背景图像 - 因此需要显示为 block - 单击时应用一个类，将背景图像更改为减号并显示链接下方的文本。

有没有办法在动态文本左侧显示图标 5px 并且它仍然是一个 block (以便您可以看到背景图像)？

我的 HTML 如下 - 请注意，该选项卡还包含一个具有单独功能的勾选框。

  <div class="expandLinkWO">Cardio &amp; Arms<span class="plusCircle btn"><span></span>     </span> <span class="tickBox"></span>

Answer 1

您可以使用内联 block ，它可以满足您的需求。或者你可以让你的按钮 float 。两者都应该有效。

内联版本

.plusCircle {
   display:inline-block;
   vertical-align: top;
   margin-right: 5px;
}

float 版本:

.plusCircle {
   display:block;
   float:left;
   margin-right: 5px;
}

我相信内联 block 方式更好，但 IE 和内联 block 不是最好的 friend ..