如何在（服务）标题旁边显示文本

Question

我知道这很容易，但我无法弄明白。如何在服务标题旁边显示文字？不低于标题。

以下是代码：

.services {
  display: inline-block;
  margin-top: -35px;
  padding: 30px 0 0 10px;
  font-size: 40px;
  background-color: #f4e409;
}

.services h2 {
  margin-bottom: 24px;
}

.services h3 {
  font-size: 20px;
  margin-left: 20px;
}

.services ul li {
  display: inline-block;
  list-style: none;
  vertical-align: middle;
}

.services ul li p {
  display: inline-block;
  font-size: 16px;
  vertical-align: middle;
}

<div class="services">
  <ul>
    <li>
      <h2>Services</h2>
    </li>
    <li>
      <p>imperdiet. Etiam n imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiam mperdiet. Etiam n imperdiet. mperdiet. Etiam n imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiamn imperdiet. </p>
    </li>
  </ul>
</div>

Answer 1

如果您想要左侧的“服务”和右侧的文字，请使用width：

.services {
  display: inline-block;
  padding: 30px 10px;
  background-color: #f4e409;
}

.services h2 {
  margin-bottom: 24px;
}

.services h3 {
  font-size: 20px;
  margin-left: 20px;
}

.services ul li {
  display: inline-block;
  list-style: none;
  vertical-align: middle;
  width: 45%;
}

.services ul li p {
  display: inline-block;
  font-size: 16px;
  vertical-align: middle;
}

<div class="services">
  <ul>
    <li>
      <h2>Services</h2>
    </li>
    <li>
      <p>imperdiet. Etiam n imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiam mperdiet. Etiam n imperdiet. mperdiet. Etiam n imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiamn imperdiet. </p>
    </li>
  </ul>
</div>

预览

Answer 2

如果你的意思是“直接在h2之后没有换行符，间距等”：

.services {
  display: inline-block;
  padding: 30px 10px;
  background-color: #f4e409;
}

.services h2 {
  display: inline !important;
  margin-bottom: 24px;
}

.services h3 {
  font-size: 20px;
  margin-left: 20px;
}

.services ul li {
  display: inline;
  list-style: none;
  vertical-align: middle;
  width: 45%;
}

.services ul li p {
  display: inline;
  font-size: 16px;
  vertical-align: middle;
}

<div class="services">
  <ul>
    <li>
      <h2>Services</h2>
    </li>
    <li>
      <p>imperdiet. Etiam n imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiam mperdiet. Etiam n imperdiet. mperdiet. Etiam n imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiamn imperdiet. Etiamn imperdiet. </p>
    </li>
  </ul>
</div>