Question

我在我正在构建的网页上有一个价格列表。这一切在谷歌完全正常，但不是在Firefox中。香肠和薯条项目应该像它下面的那样展示，但它没有，我只是无法弄明白。也许你们其中一个人可以。谢谢

继承了正在播放的代码部分。下面是完整的代码https://jsfiddle.net/p2L3uxyp/

<ul class="menu-items" id="kids-menu-styling">
<li><span>Sausage and Chips</span></li>
<li><span>(Including drink)</span><span>£3.20</span></li>
<li><span>Scampi and Chips</span></li>
<li><span>(Including drink)</span><span>£3.20</span></li>
<li><span>Fish Goujons and Chips</span></li>
<li><span>(Including drink)</span><span>£3.20</span></li>
</ul>

Answer 1

这是一个浮动问题。将overflow: auto添加到.menu-items，这样可以解决问题。

https://jsfiddle.net/uncf0t0b/1/

Answer 2

我不是100％确定问题所在，但您可能会发现设置页面的方式略有不同。我已经把一个快速的混蛋放在一起让你展示我的意思。

https://jsfiddle.net/r4yb53dL/1/

<ul>
  <li>
    <div class="menu-item-title">Sausage and Chips</div>
    <div class="menu-item-details">
      <span class="details">(Including drink)</span>
      <span class="seperator">  ....  </span>
      <span class="price">£3.20</span>
    </div>
  </li>
</ul>

通过利用html中的块元素和内联元素，您可以使用最小的css来实现您的需求。

编辑：

只是想添加 - 感谢您进行跨浏览器测试！当一个网站在一个浏览器中看起来很棒，但在另一个浏览器中看起来很糟糕时，这是一种耻辱。

编辑2：

对不起 - 错字！

Firefox没有显示它应该的网页

2 个答案: