CSS - 阻止对象内嵌在文本旁边

Question

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

有没有办法在动态文本的左侧显示图标5px，并且它仍然是一个块（所以你可以看到背景图像）？

我的HTML位于下方 - 请注意，该标签还包含一个具有单独功能的复选框。

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

Answer 1

您可以使用内联块，它可以执行您想要的操作。或者你可以让你的按钮浮动。两者都应该有用。

<强>内联的版本

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

<强>浮子版本：

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

我相信内联块方式更好，但IE和内联块不是最好的朋友..

Answer 2

您可能需要inline-block：

.plusCircle { 
    background: url(your/img/url.jpg);
    height: 20px;
    width: 20px;
    display: inline-block;
    margin-left: 5px;
}