如何让我的div外包装，但文字在里面？

Question

像这样： 我正在尝试制作蓝色文本，它表示加入我们的discord服务器的宽度为100％，当它的内部包装器时，它是内部包装器以使文本与包装器匹配

Answer 1

将background-color应用于全角元素，然后将要包含的内部文本包装在与内容部分宽度匹配的另一个元素中。这是一个匹配截图的示例。 .viewport将是定义实际内容宽度的类 - 只需将要嵌套在要全宽的元素内部。

.container {
  background: #09c;
  color: #fff;
}

.viewport {
  width: 80%;
  max-width: 960px;
  margin: auto;
}

.content {
  background: #eee;
  padding: 1em 0 0;
}

.content .viewport {
  background: #fff;
}

<div class="container">
  <div class="viewport">Join our discord server</div>
</div>

<nav class="viewport">navigation</nav>

<div class="content">
  <div class="viewport">content section<br>content section</div>
</div>