如何做css样式

Question

手头上的一项非常简单的任务......但是我的浏览器在徒劳无功的情况下笑了笑。

如何在文本

周围设置div类的样式

所以我在后端使用jinja，我的html看起来像这样

<div class="content">
<pre>  {{contents}}</pre>
</div>

我的css是

div.content {
    background-color: #add8e6;

}

但正在发生的事情是..如果“内容”是一半的线......这个样式贯穿整个水平线。 我只想优雅地将颜色包裹在文本上而不是整个水平页面上。 当我尝试

display: inline; 

所有背景颜色都消失了。

Answer 1

使用display:inline-block

div.content {
    background-color: #add8e6;
    display:inline-block

}

<强> DEMO

inline和inline-block

之间的差异

inline-block - 此值使元素生成内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。

内联 - 此值会导致元素生成一个或多个内联框。

Answer 2

试试这个：

div.content * {
    background-color: #add8e6;
}

这会将样式应用于div块中的所有元素。