Saya memiliki daftar item dengan harga di halaman web yang saya buat. Semuanya berfungsi dengan baik di google tetapi tidak di firefox. Item sosis dan keripik seharusnya ditampilkan seperti yang ada di bawahnya tetapi tidak, dan saya tidak bisa mengetahuinya. Mungkin salah satu dari Anda bisa. Terima kasih

Inilah bagian dari kode yang dimainkan. Berikut kode lengkapnya 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>
0
Reece Barrett 14 Maret 2017, 19:02

2 jawaban

Jawaban Terbaik

Ini masalah mengambang. Tambahkan overflow: auto ke .menu-items, ini akan memperbaikinya.

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

2
Johannes 14 Maret 2017, 16:15

Saya tidak 100% yakin apa masalahnya, tetapi Anda mungkin merasa lebih berguna untuk menyiapkan halaman dengan sedikit berbeda. Saya telah melemparkan jsfiddle cepat bersama agar Anda menunjukkan apa yang saya maksud.

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>

Dengan memanfaatkan elemen blok dan elemen sebaris dalam html, Anda dapat menggunakan css minimal untuk mencapai apa yang Anda butuhkan.

Sunting:

Hanya ingin menambahkan - terima kasih untuk pengujian lintas browser! Sayang sekali ketika sebuah situs terlihat bagus di satu browser, tapi jelek di browser lain.

Sunting 2:

Maaf - salah ketik!

0
jock.perkins 14 Maret 2017, 16:43