我在网站上工作,我的网站标题和网站标语后面有一个白色背景。但是,我希望网站标题的背景是实际标题的宽度,而不是 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}
最佳答案
只需添加 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;
}
关于html - 缩小标题背景而不是 100% 页面宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22362000/