如何在不使用内联HTML的情况下将h1与文本置于标题同一行

嘿，刚入门HTML碰到这种布局小问题太正常啦！我给你几个完全不用内联HTML的解决方案，都是纯CSS的路子，上手很简单：

方案1：修改h1的display属性（最直接的方法） #

默认情况下h1是块级元素，会独占一整行。我们只需要把它改成inline-block或者inline，就能和其他行内元素排在同一行：

<head>
  <style>
    /* 用inline-block既能同行排列，又能保留块级元素的宽高、margin/padding设置能力 */
    h1 {
      display: inline-block;
      margin-right: 12px; /* 给标题和文本加个间距，避免挤在一起 */
    }
  </style>
</head>
<body>
  <h1>我的主标题</h1>
  <span>这是和标题同行的说明文本</span>
</body>

如果不需要给h1设置宽高，用display: inline也可以，不过inline-block的灵活性更高哦。

方案2：用Flexbox布局（现代主流方案） #

Flexbox是现在布局的首选，不仅能轻松实现同行排列，还能一键搞定垂直对齐，后续扩展布局也更方便：

<head>
  <style>
    .title-container {
      display: flex;
      align-items: center; /* 让标题和文本在垂直方向居中对齐，视觉更和谐 */
      gap: 12px; /* 直接设置元素间的间距，比margin更省心 */
    }
  </style>
</head>
<body>
  <div class="title-container">
    <h1>我的主标题</h1>
    <p>这是和标题同行的补充文本</p>
  </div>
</body>

这个方案的优势在于，哪怕后面要在容器里加图标、按钮之类的元素，调整起来非常灵活，兼容性也覆盖了几乎所有现代浏览器。

方案3：用Float属性（传统方法，了解即可） #

这是比较老的布局手段，现在已经不推荐优先使用，但还是可以作为备选：

<head>
  <style>
    h1 {
      float: left;
      margin-right: 12px;
    }
    /* 必须加清除浮动的样式，避免父容器塌陷影响下方布局 */
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="clearfix">
    <h1>我的主标题</h1>
    <p>这是和标题同行的文本</p>
  </div>
</body>

需要注意的是，float会让元素脱离正常文档流，处理不好容易出现布局混乱，所以更推荐前两个方案。

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