css - H3 扩展的背景颜色超过内容

Question

我有一个标签，我为它添加了一个 Css 作为

      #jsn-maincontent_inner h3 {
       background-color:#BBB1A5;
       color:white;
       padding:3px 8px;
      text-transform:uppercase;
       }

但是背景颜色会延伸到整行，并且不限于内容。如何解决这个问题？？

Answer 1

我想我会插话告诉你为什么会发生这种情况，因为这些信息将来可能有用。

“h3”元素是块元素。这意味着它通常会占用您描述的整个“行”。

“span”元素（例如）表现不同的原因是因为它是“inline”元素，这意味着它将占用“刚好足够”的空间。

已经有两种解决方案可以提供帮助，您也可以设置

display: inline;

在 h3 元素上，但这也会改变其他行为。

Answer 2

最简单的做法是将文本放在 span 内，并将背景颜色放在 span 上：

  #jsn-maincontent_inner h3 {
    padding:3px 8px;
    text-transform:uppercase;
   }
  #jsn-maincontent_inner h3 span {
    background-color:#BBB1A5;
    color:white;
   }

<h3><span>Text here</span></h3>

这会将背景颜色放在文本周围。如果你想真正缩小 h3 元素，你可以为它设置一个宽度（尽管如果它比宽度长，文本会换行），或者使它成为一个内联元素（尽管这种方法还有其他缺点）。

Answer 3

尝试width为此设置一个：

  #jsn-maincontent_inner h3 {
       background-color:#BBB1A5;
       color:white;
       padding:3px 8px;
       text-transform:uppercase;
       width:500px;
       }

如果还没有，您可能还想设置widthfor ：#jsn-maincontent_inner

#jsn-maincontent_inner
{
   width:600px;
}