如何让文字显示在services标题旁而非标题下方？

嘿，我太懂这种看似简单却卡壳的感觉了！咱们直接来搞定这个问题：

你现在的核心问题是h2标签默认是块级元素，它会独占一整行，导致后续文字只能被迫跑到标题下方。要实现文字和标题并排，只需要调整几个CSS属性就行：

具体修改方案 #

1. 把.services h2的display属性改成inline或inline-block，让它不再独占一行
2. 给标题和旁边的文字加上垂直对齐属性，确保它们在同一水平线
3. 微调间距让布局更美观

修改后的完整CSS代码如下：

.services { 
  display: inline-block; 
  margin-top: -35px; 
  padding: 30px 0 0 10px; 
  font-size: 40px; 
  background-color: #f4e409; 
} 
.services h2 { 
  margin-bottom: 24px; 
  /* 关键修改：让标题变成行内块元素，不再独占一行 */
  display: inline-block;
  /* 可选：和旁边文字垂直居中对齐 */
  vertical-align: middle;
  /* 可选：给标题加右边距，和文字拉开合理间距 */
  margin-right: 15px;
} 
.services h3 { 
  font-size: 20px; 
  margin-left: 20px; 
  /* 如果h3需要和h2并排，同样设置为行内块 */
  display: inline-block;
  vertical-align: middle;
} 
.services ul li { 
  display: inline-block; 
  list-style: none; 
  vertical-align: middle; 
} 
.services ul li p { 
  display: inline-block; 
  font-size: 16px;
}

原理说明 #

块级元素（比如h1/h2/p/div这类标签）默认会占据父容器的整个宽度，所以后面的元素只能换行显示。改成inline-block后，元素既保留了块级元素的特性（可设置宽高、内外边距），又能和其他行内元素在同一行排列。

如果你的“旁边的文字”是指ul里的内容，只要保持ul和li的行内/行内块布局，就能和h2顺利排在同一行了~

内容的提问来源于stack exchange，提问作者Webappsdeva