CSS：将背景颜色添加到内联<pre> text

Question

How do I get the gray background color as in export class UserController extends Controller { @defaultWorker() async getUsers() { const service = new UserService(); return jsonResult(service.getUsers()); } @worker([HTTP_METHOD.Post]) @route("/") async addUser() { const user = { name: this.body.name, gender: this.body.gender, address: this.body.address, emailId: this.body.emailId, password: this.body.password }; const service = new UserService(); const newUser = service.addUser(user); return jsonResult(newUser, HTTP_STATUS_CODE.Created); } } which is inside an inline this word?

Here is what I have done. From the code snippet, inline seems to be fine after the <pre></pre> but not before </pre>.

<pre>

pre.inline {
    display: inline;
    background-color: #80b3FF;
    border-radius: 4px;
    padding: 3px
}

Answer 1

使用'div'和'span'解决问题的其他方法

android { 
    bundle { 
        language { 
        // Specifies that the app bundle should not support 
        // configuration APKs for language resources. These 
        // resources are instead packaged with each base and 
        // dynamic feature APK. 
        enableSplit = false 
        } 
    } 
}

.inline { background-color: #80b3FF; border-radius: 4px; padding: 3px } 指定统计模型。

Answer 2

尽管是内联显示，但这似乎是pre标签创建新行的结果。如果将其更改为跨度，它将按预期工作：

span{
    background-color: #80b3FF;
    border-radius: 4px;
    padding: 3px
}

<p>We use <span>model</span> to specify the statistical model.</p> 

如果需要默认的等宽字体，也可以编码：

code{
    background-color: #80b3FF;
    border-radius: 4px;
    padding: 3px
}

<p>We use <code>model</code> to specify the statistical model.</p> 

Answer 3

这是因为pre不是措辞内容。请参见here改用div。

pre.inline {
    display: inline;
    background-color: #80b3FF;
    border-radius: 4px;
    padding: 3px
}

<div>We use <pre class="inline">model</pre> to specify the statistical model.</div>

Answer 4

下面是您的代码在浏览器中呈现的图像。这几乎可以解释您面临的问题。

为了解决这个问题，下面有几种方法。使用<div>代替<p>

pre.inline {
    display: inline;
    background-color: #80b3FF;
    border-radius: 4px;
    padding: 3px
}

<div>We use <pre class="inline">model</pre> to specify the statistical model.</div> 

使用<code>代替<pre>

code.inline {
    display: inline;
    background-color: #80b3FF;
    border-radius: 4px;
    padding: 3px;
}

<p>We use <code class="inline">model</code> to specify the statistical model.</p>

This link将帮助您进一步了解<code>和<pre>

还有this link关于<p>元素的更多信息