如何无需将HTML段落元素写在同一行，实现网页同线布局？

编辑：感谢关于正确发帖方式的反馈：）非常感谢！

我正在学习freeCodeCamp的「Responsive Web Design」课程，目前卡在需要将段落元素放在同一行以实现特定网页样式的环节。

freeCodeCamp要求的代码格式（两个p元素写在同一行）：

<article class="item">
  <p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
  <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
  <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
  <p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
  <p class="flavor">Mocha</p><p class="price">4.50</p>
</article>

我不喜欢这种把两个元素挤在同一行的代码格式，而且我在VS Code里用Prettier自动格式化，保存时会自动把元素分行（这个格式我很喜欢），但这样会导致网页样式不符合预期：按要求写在同一行时，名称和价格在同一行显示且布局正常；元素分行写后，名称和价格之间出现多余空白，布局错乱。

我的需求是：不用把段落元素写在同一行代码里，也能让名称和价格在网页上同一行显示，且间距正确。

我的完整HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p>
            <p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p>
            <p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p>
            <p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p>
            <p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p>
            <p class="price">4.50</p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>

我的CSS代码：

h1,
h2,
p {
  text-align: center;
}
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
.menu {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: burlywood;
}
.flavor {
  text-align: left;
  width: 75%;
}
.price {
  text-align: right;
  width: 25%;
}
.item p {
  display: inline-block;
}

我的VS Code设置：

{
  "workbench.iconTheme": "vscode-icons",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.linkedEditing": true,
  "editor.fontLigatures": true,
  "editor.fontFamily": "Hack Nerd Font",
  "terminal.integrated.fontFamily": "Hack Nerd Font",
  "security.workspace.trust.untrustedFiles": "open",
  "workbench.colorTheme": "SynthWave '84",
  "synthwave84.brightness": 2,
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "powershell.powerShellDefaultVersion": "Windows PowerShell (x86)",
  "eslint.notebooks.rules.customizations": [],
  "prettier.printWidth": 250,
  "editor.formatOnSave": true,
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.bracketSameLine": true
}

我试过把Prettier的printWidth改成250，想让元素保持在同一行，但没生效，最后只能禁用HTML的Prettier格式化。后来我不想强制挤行，恢复了设置，因为我喜欢格式化后的代码结构。

问题根源是：HTML中换行和空格会被解析成一个空白字符，当你把两个inline-block元素分行写时，它们之间会多出一个空白字符，导致总宽度超过父容器，价格被挤到下一行。以下是几种实用解决方法：

方法1：给父元素设置font-size: 0 #

给.item添加font-size: 0消除空白字符影响，再给内部p元素恢复正常字体大小：

.item {
  font-size: 0; /* 消除inline-block元素间的空白 */
}
.item p {
  display: inline-block;
  font-size: 16px; /* 恢复正常字体大小，可按需调整 */
}

方法2：使用Flexbox布局（推荐） #

把.item改成Flex容器，不受代码换行的空白字符影响，还能更灵活控制对齐：

.item {
  display: flex;
  justify-content: space-between; /* 让两个元素分别靠左右对齐 */
}
/* 可移除原width设置，flex会自动分配空间 */
.flavor {
  text-align: left;
}
.price {
  text-align: right;
}
/* 原.item p { display: inline-block; } 可移除 */

Flexbox是现代布局方案，比inline-block更稳定，后续调整布局也更方便。

方法3：注释掉元素间的换行 #

在HTML中用注释消除换行产生的空白（不推荐，影响可读性）：

<article class="item">
  <p class="flavor">French Vanilla</p><!--
  --><p class="price">3.00</p>
</article>

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