Question

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

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

但背景颜色延伸到整行，并且不限制内容。你要解决这个问题吗？

Answer 1

我以为我会告诉你为什么会这样，因为这些信息将来可能会有用。

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

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

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

display: inline;

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

Answer 2

最简单的方法是将文本放在跨度中并将背景颜色放在跨度上：

  #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元素，你可以为它设置一个宽度（虽然文本会比宽度更长时会换行），或者使它成为一个内联元素（尽管这种方法有其他的缺点）。 / p>

Answer 3

尝试为此设置width：

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

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

#jsn-maincontent_inner
{
   width:600px;
}

H3的背景颜色延伸超过内容

3 个答案: