Question

我有以下html：

<span class="icon-top-margin-4 margin-right sprite-book-open"></span>
<p>Topic: No Topic Title</p>

和CSS：

.icon-top-margin-4 {
    background-color: red;
    content: " ";
    background-image: url(/Images/fugue/sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px; 
    vertical-align:bottom;
    width: 16px;
    line-height: 16px;
}

.sprite-book-open{ background-position: 0 -288px;  }

我希望段落在图标后面开始但它从一条新线开始。有没有办法让我做到从与图标相同的一行开始？我确实尝试在段落上留下浮动，但这使它在图标之前移动。

Answer 1

p是块元素，因此它以新行显示，您应该将其设为inline。

添加.icon-top-margin-4 + p{display:inline;}

' + '选择器会选择上述类的下一个元素。

<强> LIVE DEMO

Answer 2

您也可以将span嵌套在p内。

Answer 3

您可以将段落样式设置为display: inline

如何使HTML中的段落不换行？

3 个答案: