使用 bg-color 设置 p 元素的宽度以自动调整为文本长度？答案

【问题标题】：Set width of p element with bg-color to automatically ajust to text length?使用 bg-color 设置 p 元素的宽度以自动调整为文本长度？
【发布时间】：2014-01-27 18:54:24
【问题描述】：

我有一个带有定义背景颜色的 p 元素，它应该自动调整它的大小以适应其中的文本。我尝试将宽度设置为自动，但 p 元素仍然跨越 100%，因为定义的背景颜色可见。

如何在不每次都以 % 或 px 为单位设置宽度的情况下使宽度进行相应调整？

代码：

#job-xyz.titel {
    background-color: #dceff5;
    font-size:17px;
    color:black;
    text-align: left;
    margin-top:0px;
    padding-left:10px;
    margin-left:45px;
    width:auto;
}

<div class="header2">

<p class="titel"><strong>Linux Softwaree</strong></p>

</div>

【问题讨论】：

标签： html css width

【解决方案1】：

要设置宽度等于内容，请使用display:inline-block

#job-xyz.titel {
    background-color: #dceff5;
    font-size:17px;
    color:black;
    text-align: left;
    margin-top:0px;
    padding-left:10px;
    margin-left:45px;
    width:auto;
    display:inline-block /*added*/
}

另外，您错误地分配了 css
#job-xyz.titel
应该是
.header2 > p.titel

Your code demo 和 working demo

final working demo with proper css

【讨论】：

【解决方案2】：

<p> 是块元素，必须通过 CSS 中的“Display”属性设置为内联。

“NoobEditor”更正了代码

#job-xyz.titel {
    background-color: #dceff5;
    font-size:17px;
    color:black;
    text-align: left;
    margin-top:0px;
    padding-left:10px;
    margin-left:45px;
    width:auto;
    display:inline-block /*added*/
}

【讨论】：

只是想添加一个解释，但既然你知道，我当然会接受你的回答。谢谢
大声笑...废话，我没有注意到你和 OP 是同一个人，无论如何，你可以随时编辑我的答案并从你自己的角度编辑内容，这不是冒犯，删除我的以上评论...！！ :)