如何实现模拟餐厅菜单菜品与价格的对齐布局

针对你的需求，最简洁可靠的方案是使用Flex布局实现每组菜品和价格的左右对齐，同时避免内容贴边的问题。以下是修改后的完整代码：

修改后的HTML代码 #

<body>
  <div class="menu-page">
    <h1>Zackie's Tacos</h1>
    <p class="catchphrase">Award winning tacos!</p>
    <hr>
    <div class="food">
      <h2>Tacos</h2>
      <!-- 给每组菜品+价格添加容器，确保布局独立性 -->
      <div class="menu-item">
        <h5 class="meat">Chicken</h5> 
        <p class="price">2.50</p>
      </div>
      <div class="menu-item">
        <h5 class="meat">Beef</h5>
        <p class="price">2.75</p>
      </div>
      <div class="menu-item">
        <h5 class="meat">Carne Asada</h5>
        <p class="price">3.15</p>
      </div>
      <div class="menu-item">
        <h5 class="meat">Carnitas</h5>
        <p class="price">3.15</p>
      </div>
      <div class="menu-item">
        <h5 class="meat">Barbacoa</h5>
        <p class="price">3.15</p>
      </div>
      <div class="menu-item">
        <h5 class="meat">Shrimp</h5>
        <p class="price">3.50</p>
      </div>
      <div class="menu-item">
        <h5 class="meat">Fish</h5>
        <p class="price">3.50</p>
      </div>
      <h4 class="toppings">Toppings</h4>
      <p class="description">lettuce, tomato, cilantro, onion, raddish, jalapeno, black or pinto bean, cheese, sour cream, any signature sauce.</p>
    </div>
  </div>
</body>

修改后的CSS代码 #

.menu-page {
  background-color: white;
  width: 80%;
  margin: 15px auto;
  max-width: 500px;
}

.food {
  padding-bottom: 5px;
}

/* 核心布局：用flex实现左右元素自动对齐 */
.menu-item {
  display: flex;
  justify-content: space-between; /* 让菜品左对齐、价格右对齐 */
  padding: 5px 30px; /* 控制左右间距避免贴边，上下间距增加菜品间隔 */
}

/* 清除标签默认边距，避免布局空隙 */
.meat {
  margin: 0;
}

.price {
  margin: 0;
}

.toppings {
  text-align: center;
}

.description {
  font-style: italic;
  color: darkgray;
  font-size: 11px;
  padding-left: 30px;
  padding-right: 15px;
}

关键修改说明 #

1. 添加.menu-item容器：将每个菜品名称和价格绑定为一组，确保布局不会因菜名长度差异导致价格错位。
2. Flex布局实现对齐：display: flex让容器内元素横向排列，justify-content: space-between直接实现左右元素分别对齐容器两端，无需手动计算间距。
3. 控制内边距：通过.menu-item的padding属性，同时解决内容贴边和菜品间距问题，布局更规整。
4. 清除默认边距：移除h5和p标签的默认margin，避免不必要的空隙影响布局。

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