段落标签无法正常工作

问题描述 投票:0回答:2

在此先感谢您的帮助。

我有一个沙箱和一个实时站点,正在做一些细微调整。有一部分我无法弄清楚是什么导致了问题。下面的照片。

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
2个回答
0
投票

在沙箱上,标题似乎缺少宽度。

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

0
投票

您将样式放在具有此类名称“ .menu-item__currency”的实时网站的span标记上

您可以使用该类名,也可以放置一个新标签,并在该类中添加float:left属性,我认为这样问题就可以解决。

[如果您仍然遇到问题,请告诉我。谢谢!

© www.soinside.com 2019 - 2024. All rights reserved.