Html 如何使价格与我的模拟餐厅菜单上的项目平行

发布于07月21日

我试着把菜单上的项目放在它的一边，把价格放在菜单的另一边.我把商品排成一列，但价格没有排成一列，它们的显示方式都不同，这取决于商品的长度.

我试着搞乱内联块、填充和宽度，但它们都会把整个页面弄丢.或者他们的项目只是go 到页面的相对边缘，在单词和页面边缘之间没有空格.

.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>```

Use Flexbox

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

您可以将每个项目包装成一个div标签，其中有display: flex个.

要将两个项移到各自的端点，可以为div(.item)元素提供justify-content: space-between.

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

<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 如何使价格与我的模拟餐厅菜单上的项目平行

推荐答案

Use Flexbox

Html相关问答推荐

如何使文本从按钮中心生长？

新用户登录时无法从cookie中获取当前用户信息

CSS动画积分计数器

如何在html和css中创建动态调整大小的表元素

是否可以部分列出一个HTML有序列表

创建带有弯曲边框的水平时间线

在悬停时应用文本装饰

尽管div高度为100%，div中的内容仍会溢出

从html文件中提取元素的Python BeautifulSoup

带有排序元素的 CSS 网格

为什么当我按第三个按钮时，前两个按钮会跳动？

如何从 div 内的属性中提取 href 和文本

在 flexbox 中使用 spacer 是否有效

pull-right 不适用于 bootstrap alert 内的按钮

为什么 css position：fixed 不适用于对话框标签？

th 内的 div 标签没有占据全高

让 Iframe 覆盖整个页面

Tailwind CSS 复选框样式不起作用

按部分划分的表行带

我正在使用 react-router-dom 并创建了一个固定的导航栏，它在每个网页上不断改变大小，我不知道为什么