html - 元素的宽度始终为 100%

Question

设置 <H1> 的背景颜色时标记(或任何 <H*> 标记)元素跨越 HTML 页面的主体元素的长度。

<H1>A</H1>

H1
{
  background: #ddd;
}

下图显示了问题和理想的结果

我可以通过静态设置 <H1> 的宽度来获得想要的效果在 css 中标记

H1
{
    background: #ddd;
    width: 10px;
}

问题在于，如果我在 <H1> 中有文字大于 10px 的标签会溢出背景。

Answer 1

h1元素使用 display: block ，这是正确的默认行为。它可以防止后续内容出现在同一行上，并允许边框和背景成为内容区域的(适当的)全宽。

如果您需要元素只取文本的宽度，请使用以下方法之一:

1. 内部元素，例如 <h1><span>h1</span></h1>这样您就可以选择内部元素来提供背景。

   span {
     background-color: #CCC;
   }

   <h1><span>h1</span></h1>

2. display: inline如果您希望标题被视为内联文本并适本地流动。

   h1 {
     background-color: #CCC;
     display: inline;
   }

   <h1>h1</h1>
   
   <!-- here's where this fails -->
   
   <h1>h1 again</h1>

3. display: inline-block如果您希望标题具有 block 元素的特性(例如能够设置内边距、高度和宽度)

   h1 {
     background-color: #CCC;
     border: 1px solid #000;
     display: inline-block;
     padding: 2px 3px;
   }

   <h1>h1</h1>
   
   <!-- here's where this fails -->
   
   <h1>h1 again</h1>

4. float: left; clear: both;如果您希望标题向左对齐，但忽略其他 float 元素。这个的问题是它不会再折叠边距。

   h1 {
     background-color: #CCC;
     clear: both;
     float: left;
   }

   <h1>h1</h1>
   
   <h1>h1 again</h1>