HTML/CSS实战：如何为首页标题添加左对齐副标题？

嘿，我来帮你搞定这个副标题的问题！既然你已经标记好了副标题的放置位置，那咱们直接用HTML+CSS来实现，几步就能搞定：

第一步：调整HTML结构 #

首先把主标题和副标题放在同一个父容器里，这样能保证它们的对齐关系更可控。比如：

<!-- 假设这是你标记好位置的容器 -->
<div class="header-container">
  <h1 class="main-title">我的首页标题</h1>
  <p class="subtitle">这是和标题左对齐的副标题</p>
</div>

这里副标题用<p>或者<h2>都可以，根据你的页面层级需求来选就行。

第二步：用CSS控制对齐和样式 #

接下来只需要给父容器确认文本左对齐（默认其实就是左对齐，要是之前改过可以再设置回来），再给副标题调整一些样式让它更美观：

.header-container {
  text-align: left; /* 确保容器内文本左对齐，按需保留 */
}

.main-title {
  margin-bottom: 8px; /* 调整标题和副标题的间距，让布局更舒服 */
}

.subtitle {
  font-size: 1.2rem; /* 比主标题小一号，突出层级关系 */
  color: #666; /* 用浅灰色弱化副标题，不抢主标题风头 */
  margin: 0; /* 清除默认的p标签外边距，避免多余间距 */
}

额外小技巧 #

如果你的标题已经放在<header>或者现成的容器里，直接把副标题加在标题下面就行——因为块级元素默认占满整行，只要没有设置text-align: center之类的属性，副标题自然会和标题左对齐，甚至不需要额外加父容器：

<h1>我的首页标题</h1>
<p class="subtitle">这是自动左对齐的副标题</p>

这种情况只需要给.subtitle加样式就够啦~

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