我如何使句子h2减半？

Question

<h1 style="color: white;">We are here to <span style="color: #fdd412;">Rock</span> the <span style="color: #fdd412;">modern world</span></h1>

所以我用另一种颜色做了一些文字。但是，如何从h2的“ The”部分做出这句话呢？那么“我们在这里摇摆” h1和“现代世界”在h2？

提前感谢！

Answer 1

我完全不会在另一个h#中使用一个h#。您可以通过在两个标签上添加display: inline-block来实现此目的。

body {
  background-color: lightblue;
}

h2, h1 {
  display: inline-block;
}

<h1 style="color: white;">We are here to&nbsp;<h2><span style="color: #fdd412;">Rock</span> the <span style="color: #fdd412;">modern world</span></h2></h1>

首选方法是改为添加额外的类并使用这些类。
 
body {
  background-color: antiquewhite;
}

h1,
.h1-title {
  color: white;
  font-size: 2rem;
  font-weight: 700;
}

h2,
.h2-subtitle {
  font-size: 1.5rem;
  font-weight: 700;
}

.h1-title,
.h2-subtitle {
  display: inline-block;
}
<div class="h1-title">We are here to
  <div class="h2-subtitle"><span style="color: #fdd412;">Rock</span> the <span style="color: #fdd412;">modern world</span></div>
</div>
但是我认为只这样做会比较整洁：
 
body {
  background-color: olive;
}

h1.title {
  color: white;
}

h1.title,
h2.subtitle {
  display: inline-block;
}
<h1 class="title">We are here to</h1>
<h2 class="subtitle"><span style="color: #fdd412;">Rock</span> the <span style="color: #fdd412;">modern world</span></h2>

Answer 2

您需要一个CSS文件。看起来应该像这样：

CSS：

h1, h2 {
  width: 50%;
  height: 60px;
  margin: 0;
  padding: 0;
  display: inline;
}​

并且
HTML

应该看起来像这样：（我不知道我是否正确理解了问题，哪个部分应该是h1以及哪个h2）]

<h1 style="color: blue;">We are here to<span style="color: #fdd412;"> Rock</span></h1>
<h2>the <span style="color: #fdd412;">modern world</span></h2>

screenshot of the result

Answer 3

关键字：浮动我们在这里震撼世界