如何在移动视图上调整背景颜色（具体案例）答案

【问题标题】：How to adjust background color on mobile view (specific case)如何在移动视图上调整背景颜色（具体案例）
【发布时间】：2018-11-15 10:38:06
【问题描述】：

正如您在 2 张图片中看到的那样，当我在移动视图中加载页面时，我在文本后面应用的蓝色背景颜色不好看，因为不再正确居中。我正在寻找一种方法来保持这种背景颜色，但在文本周围适当间隔。我应该使用特定的技巧吗？

编辑：这是代码。但这里没有什么棘手的问题，只是背景颜色。

// HTML //

<div class="banner">
<p>Suggestions de présentation</p>
</div>

// CSS //

.banner {
 background-color: #0452A6;
 color: #fff;
 padding: 7px 10px;
 }

我想在移动视图中保留它，但蓝色背景颜色正确居中。

【问题讨论】：

【解决方案1】：

看不到代码就很难给出准确的答案。如果您只是想将文本保留在一行，您可以尝试 white-space:pre。

W3 学校有一个很棒的版本向您展示它可以做什么。

代码如下：

//html
<p> This is my text</p>
//css
p { white-space: pre;}

【讨论】：