Bagaimana untuk Membuat Jadual Kandungan dengan Titik Utama Hanya Menggunakan CSS?

Mencipta Titik Utama untuk Jadual Kandungan dalam CSS

Dalam mencipta jadual kandungan, selalunya wajar untuk menggunakan titik utama untuk mencipta susun atur berstruktur dan menarik secara visual. Berikut ialah penyelesaian CSS sahaja yang berkesan untuk mencapai ini:

CSS:

ul.leaders {
  max-width: 40em;
  padding: 0;
  overflow-x: hidden;
  list-style: none;
}

ul.leaders li:before {
  float: left;
  width: 0;
  white-space: nowrap;
  content:
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . ";
}

ul.leaders span:first-child {
  padding-right: 0.33em;
  background: white;
}

ul.leaders span + span {
  float: right;
  padding-left: 0.33em;
  background: white;
}

HTML:

<ul class="leaders">
  <li><span>Salmon Ravioli</span> <span>7.95</span></li>
  <li><span>Fried Calamari</span> <span>8.95</span></li>
  <li><span>Almond Prawn Cocktail</span> <span>7.95</span></li>
  <li><span>Bruschetta</span> <span>5.25</span></li>
  <li><span>Margherita Pizza</span> <span>10.95</span></li>
</ul>

Kod ini mencipta jadual kandungan yang fleksibel dan menarik secara visual dengan titik-titik utama. Kandungan bersaiz dinamik, memastikan jarak yang konsisten tanpa mengira panjang teks.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Jadual Kandungan dengan Titik Utama Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!