css - 段落标签未按预期运行
问题描述
在此先感谢您的任何帮助。
我有一个沙盒和一个实时站点,我正在对其进行一些小调整。有一个部分我无法弄清楚导致问题的原因。下面的照片。
在 li 里面有菜单项,它们有标题、描述和价格。在某些情况下,商品没有价格,当 CMS 中该字段为空时,线条的样式会有所不同。
这是我希望它出现的方式: 现场直播:https://www.crownshy.nyc/menus/#cocktails
以下是它在沙盒上的填充方式:https ://crownshy-sandbox.getbento.com/menus/#cocktails
这里的代码真的没有什么特别的,这就是为什么我有点困惑。我只需要休息一下,以全新的眼光回来,但希望你们都能加快速度。我很高兴发布 CSS,但图因为它有几个类,在开发人员控制台上查看它会更容易
<section class="menu-section">
<div class="menu-section__header">
<h2>Non-Alcoholic</h2>
</div>
<ul>
<li class="menu-item">
<p class="menu-item__heading">No Mas</p>
<p>Pear, Citrus, Rose, Lemon, Yogurt</p>
<p class="menu-item__details menu-item__details--price">
</p>
</li>
<li class="menu-item">
<p class="menu-item__heading">Ginger Jammer</p>
<p>Ginger, Mango, Togarashi, Lime, Soda</p>
<p class="menu-item__details menu-item__details--price">
</p>
</li>
<li class="menu-item">
<p class="menu-item__heading">Hojito</p>
<p>Hoja Santa, Lime, Tonic, Seasonal Herbs</p>
<p class="menu-item__details menu-item__details--price">
</p>
</li>
</ul>
</section>
解决方案
在沙盒上,标题似乎缺少宽度。
p.menu-item__heading {
width: 100%;
}
推荐阅读
- oracle - 对powerbuilder实施oracle查询
- html - 如何对齐两个单独的
- 导航栏中的类彼此相邻?
- php - PHP 方法链接:PSR 是否指定箭头对齐?
- php - 如何内爆逗号分隔的外部字符串
- java - 提高我的回文子串程序性能以及什么是 O(n) O(n2)
- javascript - 在javascript中通过键盘模拟用户输入
- reactjs - 如何只发送一个数组值(没有两个值)?
- angularjs - 当数据在列表中时,如何仅获取一行数据?
- python - ValueError: 生成器的输出应该是元组 `(x, y, sample_weight)` 或 `(x, y)`。成立:
- c++ - Window.h c ++如何从开关内的数组中获取按钮的索引