Question

我正在尝试使用标头类标语在标头上方制作标语。但是，更改主h1 css上的字体大小会进行零更改，而标语类会在我更改其大小时随时更改。我很困惑为什么我的标题没有响应，感谢您的帮助。我正在尝试使其与to this W3C example相似（示例5）。

html {
  font-size: 18px;
}

h1 {
  font-size: 3em;
  padding: 0px;
}

h1.tagline {
  font-size: 1.5em;
  margin-bottom: -20px;
  margin-top: -20px;
}

<h1 class="tagline">Homepage for</h1>
<h1>My Name</h1>

Answer 1

我想您希望tagline相对于h1改变大小吗？如果是，则将所有文本放入 one h1标签中，为标语使用span，使用<br> for the line break and a value smaller than 1em for tagline. Now the tagline font-size will change in relation if you change the font-size for h1

html {
  font-size: 18px;
}

h1 {
  font-size: 3em;
  padding: 0px;
}

h1 > span.tagline {
  font-size: 0.5em;
  margin-bottom: -20px;
  margin-top: -20px;
}

<h1><span class="tagline">Homepage for</span>
<br>My Name</h1>

Answer 2

我已经从W3C示例5中获取了html，我假设您需要CSS。

这是我的主意。

body {
  font-size: 18px;
}

header {
  padding: 1rem;
  background-color: red;
  color: black;
  display: inline-block;
}

header p,
header h1 {
  margin: 0;
  padding: 0;
  line-height: 0.75;
  text-transform: uppercase;
}

header h1{
  font-size: 5em;
}

header h1 + p {
  text-align: right;
}

<header>
  <p>Magazine of the Decade</p>
  <h1>THE MONTH</h1>
  <p>The Best of UK and Foreign Media</p>
</header>

H1标头中的字体大小调整很奇怪

2 个答案: