如何使价格与我的模拟回复菜单中的项目平行？
如何使价格与我的模拟回复菜单中的项目平行？
提问于 2022-07-21 01:32:49
我试着把菜单上的项目放在菜单的一边，把价格降低到菜单的另一边。我已经把物品排成一列，但是价格不成一列，根据商品的长度，它们都是不同的显示方式。
我试着处理内联块、填充和宽度，但是它们都把整个页面抛掉了。或者他们的项目只是转到页面的相反的边缘，在字和页面的边缘之间没有空格。我真的不知道该怎么做。同样抱歉，如果我的问题是混乱的，我是非常新的这一点。
.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>```回答 2
Stack Overflow用户
回答已采纳
发布于 2022-07-21 01:44:33
使用Flexbox
这里有一个使用挠曲箱的解决方案。
您可以将每个项目包装到一个具有display: flex的display: flex标记中。这将使您的h5和p元素并行不悖。
要将这两个项转换到相应的端点，可以将justify-content: space-between提供给div(.item)元素。
注意:默认情况下，h5和p元素有自己的边距。因此，我将保证金重新分配为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>```
Stack Overflow用户
发布于 2022-07-21 01:51:29
inline CSS属性定义元素块的水平或垂直大小，这取决于其写入模式，因此当您在price类上使用margin-left时，它不会垂直对齐所有p标记。
您可以使用flexbox或grid将其划分为2 cols，即：
<p class="grid grid-cols-2">
<span>Chicken</span>
<span>2.50</span>
</p>
.grid {
display: grid;
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73059736
复制相关文章
相似问题
腾讯云开发者
