html - 如何将价格与我的模拟餐厅菜单上的元素保持一致

转载作者：行者123 更新时间：2023-12-02 18:06:48

25

4

我试图将菜单上的元素与菜单的一侧对齐，将价格与菜单的另一侧对齐。我已将商品排列成一列，但价格并未排列，它们的显示方式都不同，具体取决于商品的长度。

我尝试弄乱内联 block 、填充和宽度，但它们都只会破坏整个页面。或者它们只是位于页面的相对边缘，单词和页面边缘之间没有空格。我不太确定该怎么做。如果我的问题令人困惑，我也很抱歉，我对此很陌生。

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

.food {
  padding-bottom: 5px;
}

.meat, .price {
  display: inline;
}

.meat {
  padding-left: 30px;
}

.price {
  margin-left: 55%;
}

.toppings {
  text-align: center;
}

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

<body>
  <div class="menu-page">
    <h1>Zackie's Tacos</h1>
    <p class="catchphrase">Award winning tacos!</p>
    <hr>
    <div class="food">
      <h2>Tacos</h2>
        <h5 class="meat">Chicken</h5> 
        <p class="price">2.50<p>
        <h5 class="meat">Beef</h5>
        <p class="price">2.75<p>
        <h5 class="meat">Carne Asada</h5>
        <p class="price">3.15<p></p>
        <h5 class="meat">Carnitas</h5>
        <p class="price">3.15<p></p>
        <h5 class="meat">Barbacoa</h5>
        <p class="price">3.15<p></p>
        <h5 class="meat">Shrimp</h5>
        <p class="price">3.50<p></p>
        <h5 class="meat">Fish</h5>
        <p class="price">3.50<p></p>
      <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>```

最佳答案

使用 flex 盒

这是一个使用 flexbox 的解决方案.

您可以将每个元素包装到具有 display: flex 的 div 标记中。这会将您的 h5 和 p 元素带到同一行。

要将两个元素移到各自的末端，您可以向 div(.item) 元素提供 justify-content: space- Between 。

注意:请注意，h5 和 p 元素默认情况下有自己的边距。因此，我将 margin 重新分配为 margin: 1rem 0; 给 .meat 和 .price。

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

.food {
  padding-bottom: 5px;
}

.item {
  display: flex;
  justify-content: space-between;
}

.meat {
  padding-left: 30px;
}

.meat, .price {
  margin: 1rem 0;
}

.toppings {
  text-align: center;
}

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

</style>
<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="item"><h5 class="meat">Chicken</h5> <p class="price">2.50</p></div>
      <div class="item"><h5 class="meat">Beef</h5><p class="price">2.75</p></div>
      <div class="item"><h5 class="meat">Carne Asada</h5><p class="price">3.15</p></div>
      <div class="item"><h5 class="meat">Carnitas</h5><p class="price">3.15</p></div>
      <div class="item"><h5 class="meat">Barbacoa</h5><p class="price">3.15</p></div>
      <div class="item"><h5 class="meat">Shrimp</h5><p class="price">3.50</p></div>
      <div class="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>```

关于html - 如何将价格与我的模拟餐厅菜单上的元素保持一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73059736/

25

4

0

文章推荐： Mongodb聚合嵌套子文档

文章推荐： asp.net - 用于显示 ASP.NET MVC Web 应用程序的虚拟服务器

文章推荐： fortran - 74029 是什么日期？

Drupal 内容类型(餐厅)设计
我有一个内容类型餐厅。对于每家餐厅，我想记录他们的菜单。示例数据如下所示: 饮料可乐 $4.99 矿泉水 $2.99 鸡尾酒蓝色泻湖
zomato-api - 如何使用餐厅链接获取 Zomato 餐厅 ID？
我想获取 Zomato 中一家餐厅的详细信息。我将它的链接作为输入 ( https://www.zomato.com/mumbai/fantasy-the-cake-shop-kalyan?utm_s
objective-c - 检索城市信息(酒店、餐厅、景点等)
我正在制作一个记录目的地(城市、州、国家、城镇、郊区等)的应用程序。仅使用此信息，我如何检索有关排名最高的企业的信息包括: 购物中心餐厅景点酒店商店(书店、CD 店等) 他们的价格(如果有的话
algorithm - 解决 ACM TJU 2886 - 餐厅
我正在尝试解决这个问题:http://acm.tju.edu.cn/toj/showp2886.html 我已经尝试了一些解决方案，我将解释其中的两个。请注意，两者都假设成本(位置)是一个凸函数，这意
php - 餐厅 SQL 预订，包含基本时间表可用性和异常(exception)情况
我正在开发一个项目，用户可以在餐厅进行预订，但仅限于餐厅允许的日期。餐厅还可以设置特定时间有多少个座位。因此，餐厅可以提供每周格式的时间表，但也可以提供异常(exception)情况(例如假期)。
c# - asp.net MVC 4，标记地点 - 最佳实践(例如酒吧、商店、餐厅)
ASP.NET MVC 4 网络应用、EF 5、SQL Server 2012 Express、Visual Web Developer 2012 Express、Code First 我有一个地点对

首页

博学

6Ren·AI

商城

html - 如何将价格与我的模拟餐厅菜单上的元素保持一致

使用 flex 盒