收縮標題背景而不是100％的頁面寬度

Question

我在一個網站上工作，在我的網站標題和網站標語後面有一個白色背景。但是，我希望網站標題的背景是實際標題的寬度，而不是100％。

任何幫助將不勝感激！

Site

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

只需添加顯示：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; 
}