html - CSS - 在文本旁边嵌入块对象

Question

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

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

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

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

score 3 · Accepted Answer

您可以使用 inline-block，它可以满足您的需求。或者你可以让你的按钮浮动。两者都应该工作。

内联版本

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

浮动版：

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

我相信 inline-block 方式更好，但 IE 和 inline-block 不是最好的朋友。

score 1 · Accepted Answer

您可能需要inline-block：

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

2 回答 2