如何实现HTML标签横向并排对齐？

首先你的代码存在几个不符合HTML规范的问题：

• <tr>是表格行标签，必须嵌套在<table>内，不能直接放在<div>里
• 标签嵌套顺序错误，比如<h1>在<ins>和<font>之前就闭合了，正确的嵌套应该是从内到外依次闭合
• <font>标签已被HTML5废弃，应该用CSS来设置文字样式
• <h1>是块级元素，默认会独占一行，这也是它们纵向排列的原因

下面提供几种让元素横向并排的可行方案：

方案1：使用Flexbox布局（推荐） #

Flexbox是现代布局的首选方式，简单灵活：

<div class="nav-wrapper">
  <h1><ins>Home</ins></h1>
  <h1><ins>Contact</ins></h1>
</div>

<style>
.nav-wrapper {
  display: flex;
  gap: 30px; /* 控制两个标题之间的间距 */
}

.nav-wrapper h1 {
  font-weight: bold;
  color: white;
  margin: 0; /* 清除h1默认的上下外边距 */
}
</style>

方案2：使用inline-block #

通过将块级元素转为行内块元素实现并排：

<div class="nav-wrapper">
  <h1><ins>Home</ins></h1>
  <h1><ins>Contact</ins></h1>
</div>

<style>
.nav-wrapper h1 {
  font-weight: bold;
  color: white;
  display: inline-block;
  margin: 0 30px 0 0; /* 右边添加间距 */
}
</style>

方案3：语义化导航结构（更推荐） #

如果这是页面导航栏，建议使用语义化的<nav>和<a>标签，更符合HTML规范：

<nav class="main-nav">
  <a href="#" class="nav-item">Home</a>
  <a href="#" class="nav-item">Contact</a>
</nav>

<style>
.main-nav {
  display: flex;
  gap: 30px;
}

.nav-item {
  font-size: 2em; /* 匹配h1的字号 */
  font-weight: bold;
  color: white;
  text-decoration: underline; /* 模拟<ins>的下划线效果 */
}
</style>

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