Question

我正在网站上工作，并在我的网站标题和网站标语后面有白色背景。但是，我希望网站标题的背景是实际标题的宽度，而不是跨越100％。

任何帮助将不胜感激！

CSS

.site-title {
    .site-title-font;
    color:@site-title-color;
    background-color:white;
    padding:5px;
}
.site-tagline {
    .site-tagline-font;
    color:@site-tagline-color;
    background-color:white;
    margin-top:10px;
    padding:5px 5px 5px 5px;
}

HTML / JSON

          <!--Site title or logo.-->
      {.section website}

        <div class="site-title" data-content-field="site-title">
          <a class="site-title" href="/">
            {.section logoImageUrl}
             <img class="logo" src="{logoImageUrl}?format=original" alt="{siteTitle}" />
            {.or}
              {siteTitle}
            {.end}
          </a>
        </div>

            <!--Site tagline.-->
            <div class="site-tagline">
            {.section siteTagLine}<div>{@}</div>{.end}
            </div>
          {.end}

Answer 1

只需添加display：inline-block

即可

.site-title {
  background-color: #FFFFFF;
  color: #181818;
  display: inline-flex;
  font-family: "proxima-nova";
  font-size: 48px;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 10px;
  padding: 5px;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
}

缩小标题背景而不是100％页面宽度

1 个答案: