H1 background-color 属性填充整行 [英] H1 background-color property fills the whole line

问题描述

我目前有一个 text-align: center; h1 元素.它还有一个 background-color: #000506;.当前的问题是此背景颜色填充了整行，如下所示:我想要它做的是只填充文本所在的区域.我能够做到这一点的唯一方法是使左右边距非常大，即使这样也不是完美的.

I currently have a text-align: center; h1 element. It also has a background-color: #000506;. The current issue is that this background color fills the whole line as shown here: What I want it to do is to only fill the area where the text is. The only way I've been able to do this is making the left and right margins really large, and even then it's not perfect.

margin-left: 600px;
margin-right: 600px;

推荐答案

您可以重置显示以使用表格布局模型，使其缩小以适应内容.

you can reset display to use the table-layout model so it will shrink to fit content.

示例

h1 {
  display: table;
  margin: auto;
  
  /* extra style */
  border-radius: 1em;
  background: #333;
  color: #eee;
  padding: 0 0.5em;
  line-height:1em;
}

<h1>Sheet List</h1>

理论上很快，不需要显示，width 和 margin:auto 会在 max-content 将被广泛实施.

theoraticly and very soon, display won't be needed, width and margin:auto will do fine when max-content will be widely implemented.

h1 {
  width:max-content;
  margin: auto;
  
  /* extra style */
  border-radius: 1em;
  background: #333;
  color: #eee;
  padding: 0 0.5em;
  line-height:1em;
}

<h1>Sheet List</h1>

https://developer.mozilla.org/en-US/docs/Web/CSS/width#fill

最大内容

固有的首选宽度.

这篇关于H1 background-color 属性填充整行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！