Bagaimana untuk membuang lekukan Senarai yang Tidak Diingini dalam CSS?

Mengalih keluar Lekukan Senarai dengan CSS: Panduan Komprehensif

Lekukan yang tidak diingini dalam senarai tidak tertib, terutamanya apabila garisan dibalut, boleh mengecewakan. Berikut ialah penyelesaian yang mendalam untuk menyelesaikan isu ini.

Dalam contoh anda, lekukan berlaku disebabkan penggunaan apungan: dibiarkan pada

elemen. Ini mencipta elemen peringkat blok yang memenuhi ruang secara mendatar. Selain itu, penggunaan jidar pada bekas induk #info juga mungkin menyumbang kepada lekukan.

Untuk menghapuskan lekukan, laksanakan CSS berikut:

ul {
    padding: 0;
    list-style-type: none;
}

Kod ini mengalih keluar sebarang padding yang mungkin wujud dalam

elemen dan menyembunyikan titik tumpu senarai lalai.

Anda mungkin pernah cuba untuk menetapkan margin dan padding kepada sifar, tetapi ini sahaja mungkin tidak mencukupi. Dengan menetapkan kedua-dua sifat kepada sifar pada

dan melaraskan sifat apungan dan lebar bagi
• elemen, anda boleh menghapuskan ruang yang tidak diingini:

  ul {
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: none;
      width: auto;
  }

  Bersempena dengan perubahan gaya ini, anda mungkin perlu melaraskan jidar atau kedudukan #info bekas induk untuk mencapai reka letak yang diingini.

  Berikut ialah versi semakan HTML/CSS anda dengan yang dicadangkan perubahan:

  <div>
  <pre class="brush:php;toolbar:false">#info {
    color: #FFFFFF;
    margin: 0 auto;
    border-radius: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: #FFF;
    padding: 20px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#cccccc));
    overflow: hidden;
  }
  
  ul {
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: none;
      width: auto;
  }

  Selepas menggunakan perubahan ini, lekukan yang tidak diingini akan hilang, menjajarkan item senarai siram dengan tepi kiri.