html - 如何做css样式

Question

手头上的一个非常简单的任务..但是我的浏览器因为我徒劳的尝试而在我脸上大笑。

如何在文本周围设置 div 类的样式

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

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

我的CSS是

div.content {
    background-color: #add8e6;

}

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

display: inline;

所有背景颜色都消失了。

score 5 · Accepted Answer

采用display:inline-block

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

}

inline和之间的区别inline-block

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

inline - 此值使元素生成一个或多个内联框。

score 1 · Accepted Answer

试试这个：

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

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

2 回答 2