如何将竖线移至div元素内Services标题旁？前端实现咨询

嘿，我来帮你搞定这个竖线的问题！你当前的代码里，<h2>和.vl都是块级元素，默认会上下排列，咱们只需要调整布局逻辑，就能把竖线精准放到标题旁边。

简化并调整后的HTML #

先把.vl里多余的<h3>去掉（毕竟咱们要的是纯竖线，不是文字）：

<div class="services">
  <h2>Services</h2>
  <div class="vl"></div>
</div>

优化后的CSS #

通过弹性布局实现横向排列，再微调竖线样式：

.services {
  margin-top: -35px;
  padding: 30px 10px; /* 合并内边距写法更简洁 */
  font-size: 40px;
  background-color: #fcff60;
  display: flex; /* 开启弹性布局，让内部元素横向并排 */
  align-items: center; /* 让标题和竖线垂直居中对齐 */
  gap: 15px; /* 标题与竖线的横向间距，可按需调整 */
}

.services h2 {
  margin: 0; /* 清除h2默认的上下外边距，避免布局混乱 */
}

.vl {
  border-left: 5px solid #000; /* 替换成你需要的颜色，比如rgb(20,20,20) */
  height: 45px; /* 竖线高度，和标题行高匹配，可灵活调整 */
}

关键调整说明 #

• display: flex是核心：让标题和竖线从默认的上下排列变成横向并排，搭配align-items: center保证两者垂直居中，视觉更协调。
• 清除h2默认外边距：避免弹性布局里出现不必要的留白，让间距完全由我们控制。
• 自定义竖线高度：通过height属性让竖线高度和标题匹配，如果你想让竖线贯穿整个.services容器的高度，可以把height改成100%，同时把align-items改成stretch。

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