CSS：将文本背景扩展为容器宽度

Question

我在单元格中有一个文本，我想制作背景颜色，但我希望颜色宽度取容器div的宽度，而不是文本的宽度。

HTML：

<div class='col-md-4'>
<span class='section'>Remove Members:</span>
</div>

CSS：

.section{
  background-color: #f7a7af;
  width: 100%;
  background-size: contain;
}

Answer 1

设置部分跨度样式以显示：block / inline-block或使用div而不是span。

＆＃13;

＆＃13;

.section{
  background-color: #f7a7af;
  width: 100%;
  background-size: contain;
  display:inline-block;
}

＆＃13;

<div class='col-md-4'>
<span class='section'>Remove Members:</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要将display的范围更改为inline-block，因为默认情况下span具有display: inline，您无法在内联元素上设置宽度。

.col-md-4 {
  width: 300px;
  background: lightblue;
}
.section {
  background-color: #f7a7af;
  width: 100%;
  display: inline-block;
}

<div class='col-md-4'>
  <span class='section'>Remove Members:</span>
</div>