Penyelesaian untuk sempadan CSS hanya memohon kepada item senarai pertama

 .-Related-Post {
  latar belakang warna: #f7f7f7;
  Sempadan: 5PX Solid #1098AD;
  Padding: 5px;
  lebar: 500px;
  Senarai-jenis jenis: Tiada; /* Keluarkan gaya lalai item senarai, seperti titik*/
  Margin-Bottom: 10px; /* Pilihan: Tambah jarak antara item senarai*/
}

.s-post-post IMG {
  lebar: 100px;
  Ketinggian: 70px;
  Terapung: Kiri; /* Buat gambar terapung di sebelah kiri*/
  margin-kanan: 10px; /* Tambahkan jarak antara gambar dan teks*/
}

. dival-post div {
  Limpahan: Tersembunyi; /* Terapung jelas untuk mengelakkan elemen induk daripada runtuh*/
}

.related-link {
  paparan: blok; /* Buat pautan menduduki seluruh baris*/
  Font-Weight: Bold;
}

.related-pengarang {
  saiz font: 0.8EM;
  Warna: #666;
}

Struktur HTML yang sepadan adalah seperti berikut:

 <sepet>
  <h5> <strong> Posts berkaitan </strong> </h5>
  <ul>
    <li class="Post Related">
      <img src="image1.jpg" alt="mantyping"    style="max-width:90%"  style="max-width:90%">
      <dana>
        <a href="howtolearnwebdevelopment.html" class="claund-link"> bagaimana untuk belajar pembangunan web </a>
        <p class="berkaitan-pengarang"> <strong> oleh Jonas Schmed </strong> </p>
      
    </dana>
</li>
    <li class="Post Related">
      <img src="image2.jpg" alt="lightning"    style="max-width:90%"  style="max-width:90%">
      <dana>
        <a href="UnknownPowersOfcss.html" class="Related-link"> Kuasa yang tidak diketahui CSS </a>
        <p class="berkaitan-pengarang"> <strong> oleh Jim Dillon </strong> </p>
      
    </dana>
</li>
    <li class="Post Related">
      <img src="image3.jpg" alt="code javascript"    style="max-width:90%"  style="max-width:90%">
      <dana>
        <a href="javascriptisawesome.html" class="Related-link"> Mengapa JavaScript Awesome </a>
        <p class="berkaitan-pengarang"> <strong> oleh matilda </strong> </p>
      
    </dana>
</li>
  </ul>
</sepet>

Dalam contoh ini, kelas yang berkaitan. Untuk memaparkan kesan yang lebih baik, kod sampel juga menambah gaya seperti gambar terapung, terapung yang jelas, dan menyesuaikan jarak.

Penyelesaian: Tambahkan sempadan ke seluruh bar sisi

Jika matlamatnya adalah untuk menambah seluruh sempadan ke seluruh bar sisi, maka gaya CSS harus digunakan untuk elemen . Berikut adalah contoh:

 selain {
  latar belakang warna: #f7f7f7;
  Border-Top: 5PX Solid #1098AD;
  Sempadan-Bottom: 5PX Solid #1098AD;
  Padding: 20px;
  lebar: 500px;
}

Struktur HTML yang sepadan adalah sama dengan contoh di atas.

Nota dan ringkasan

• Semak Struktur HTML: Pastikan HTML disusun dengan betul dan bahawa semua item senarai disertakan dengan betul di dalam unsur -unsur dan
  .
• Pemilih CSS: Sahkan sama ada pemilih CSS menunjuk ke elemen sasaran dengan betul. Jika sasaran adalah setiap item senarai, pemilih harus menjadi kelas atau ID yang digunakan untuk elemen
• . Jika sasaran adalah sidebar keseluruhan, pemilih harus menjadi elemen .
• Konflik Gaya: Periksa sama ada gaya CSS lain bertentangan dengan gaya semasa, menyebabkan sempadan tidak dipaparkan secara normal. Anda boleh menggunakan alat pemaju penyemak imbas untuk menyemak gaya elemen dan melihat apakah gaya mana -mana ditimpa.
• Keserasian pelayar: Pelayar yang berbeza mungkin mempunyai penguraian sedikit gaya CSS, jadi ujian keserasian diperlukan semasa pembangunan.

Dengan langkah -langkah di atas, anda harus dapat menyelesaikan masalah yang sempadan CSS hanya digunakan untuk item senarai pertama dan tambahkan sempadan yang betul untuk setiap item senarai atau seluruh bar sisi. Ingat, memahami peranan struktur HTML dan pemilih CSS adalah kunci untuk menyelesaikan masalah tersebut.