如何让h2标签与p标签显示在同一行？已尝试display:inline无效

嘿，我明白你遇到的困扰了！你现在的问题在于h2和p都是默认的块级元素，它们会自动独占一行，哪怕你给父元素加了inline-block也没用——因为父元素的布局不会改变子元素本身的块级特性。

下面给你两种简单有效的解决方案：

方法一：直接修改h2和p的display属性 #

你需要把h2和p都设置为inline-block（或者inline），这样它们就能在同一行显示了。同时记得去掉默认的外边距，避免不必要的间距：

/* 给父元素保留基础样式 */
.NativeName {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 28px;
}

/* 关键：修改子元素的display属性 */
.NativeName h2, .NativeName p {
  display: inline-block;
  vertical-align: top; /* 保持顶部对齐 */
  margin: 0; /* 清除默认外边距 */
}

/* 可选：给h2加个右边距，让标签和内容之间更美观 */
.NativeName h2 {
  margin-right: 8px;
}

你的HTML可以保持原样，不需要调整：

<div className="NativeName">
  <h2>Native Name:</h2>
  <p>{country.nativeName}</p>
  <h2>Population:</h2>
  <p>{country.population}</p>
  <h2>Region:</h2>
  <p>{country.region}</p>
  <h2>Sub Region:</h2>
  <p> {country.subregion}</p>
  <h2>Capital:</h2>
  <p> {country.capital}</p>
</div>

方法二：使用Flex布局（更灵活推荐） #

如果希望每组标签和内容单独占一行，同时保持同行显示，用Flex布局会更直观：

.NativeName {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 28px;
}

/* 给每组标签+内容包裹一个div，设置为flex容器 */
.NativeName .item-group {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 10px; /* 每组之间的间距 */
}

.NativeName h2 {
  margin-right: 8px;
  margin: 0;
}

.NativeName p {
  margin: 0;
}

对应的HTML调整为每组用div包裹：

<div className="NativeName">
  <div class="item-group">
    <h2>Native Name:</h2>
    <p>{country.nativeName}</p>
  </div>
  <div class="item-group">
    <h2>Population:</h2>
    <p>{country.population}</p>
  </div>
  <div class="item-group">
    <h2>Region:</h2>
    <p>{country.region}</p>
  </div>
  <div class="item-group">
    <h2>Sub Region:</h2>
    <p> {country.subregion}</p>
  </div>
  <div class="item-group">
    <h2>Capital:</h2>
    <p> {country.capital}</p>
  </div>
</div>

这样每组的h2和p都会在同一行，而且每组之间也会自动换行，布局更清晰。

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