Bagaimanakah item UL boleh kekal dalam DIV yang mengandunginya?

Question

Saya mempunyai persediaan yang sangat mudah:

<div class="container">
  <ul>
    <li>Projek 1</li>
    <li>Projek 2</li>
  </ul>
</div>

Saya akan menyangka bahawa semua kandungan dan titik peluru UL akan berada di dalam div, tetapi itu tidak berlaku pada masa ini.

Peluru UL muncul di luar div, dan apabila limpahan disembunyikan, ia sebenarnya hilang.

Bagi saya perkara ini bermasalah dalam beberapa cara, dan masalah ini wujud dalam pelbagai penyemak imbas, saya telah mencari spesifikasi HTML tetapi tidak dapat mencari apa-apa tentang bagaimana ini sepatutnya berlaku.

Adakah terdapat pembetulan CSS atau pembetulan reka letak lain?

Answer 1

list-style-position: inside Berfungsi dengan baik dalam kebanyakan kes, kecuali apabila anda memerlukan peluru berbilang baris pada skrin kecil, kerana ini akan menyebabkan teks diselaraskan dengan peluru, bukannya dengan permulaan teks.

Mengekalkan lalai text-align: outside, yang membenarkan jidar kecil dan mewajarkan teks untuk menutup mana-mana bekas berpusat, boleh menyelesaikan masalah penjajaran peluru.

ul, ol {
  margin-left: 0.75em;
  text-align: left;
}

Answer 2

Anda perlu menggunakan list-style-position:

ul {
   list-style-position: inside;
}