段落标签未按预期运行答案

【问题标题】：Paragraph Tags are not Functioning As Expected段落标签未按预期运行
【发布时间】：2020-04-21 18:47:07
【问题描述】：

在此先感谢您提供的任何帮助。

我有一个沙盒和一个实时站点，我正在对其进行一些小的调整。有一个部分我无法弄清楚导致问题的原因。下面的照片。

在 li 中，菜单项具有标题、描述和价格。在某些情况下，商品没有价格，当 CMS 中该字段为空时，线条的样式会有所不同。

这是我希望它出现的方式：实时站点：https://www.crownshy.nyc/menus/#cocktails

cocktails page non-alc with no prices

以下是它在沙盒上的填充方式：https://crownshy-sandbox.getbento.com/menus/#cocktails

Sandbox cocktails page non-alc no prices

这里的代码真的没有什么特别的，这就是为什么我有点困惑。我只需要休息一下，以全新的眼光回来，但希望你们都能加快步伐。我很高兴发布 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>

【问题讨论】：

标签： css list paragraph

【解决方案1】：

在沙盒上，标题似乎缺少宽度。

    p.menu-item__heading {
    width: 100%;
}

【讨论】：

怎么会覆盖段落html来断行呢？
很高兴有帮助。它不是覆盖显示：内联块。 width:100% 强制标题填充容器。如果标题更改为 display:block; 则不需要宽度这会迫使其他
移动到它下方。

【解决方案2】：

您将样式放在具有此类名称.menu-item__currency的实时站点的跨度标签上

您可以使用该类名称，也可以放置一个新标签并为该类添加float:left 属性，我认为问题将解决。

【讨论】：