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

【问题标题】：CSS: extend the text background to the container widthCSS：将文本背景扩展到容器宽度
【发布时间】：2016-10-28 17:28:12
【问题描述】：

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

HTML：

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

CSS：

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

【问题讨论】：

标签： html css

【解决方案1】：

您需要将 span 的 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>

【讨论】：

【解决方案2】：

将部分跨度样式设置为显示：块/内联块或使用 div 代替跨度。

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

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

【讨论】：