Bagaimana untuk Mencipta Titik Utama untuk Jadual Kandungan menggunakan CSS sahaja?

Mencipta Titik Utama untuk Jadual Kandungan menggunakan CSS

Mencapai titik utama dalam jadual kandungan boleh menjadi rumit, tetapi CSS menawarkan cara yang berkesan penyelesaian.

CSS-Sahaja Pendekatan:

Seperti yang dicadangkan oleh sumber yang bereputasi, teknik CSS sahaja berikut menangani isu ini dengan elegan:

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;
}

Struktur HTML:

Untuk menggunakan teknik ini, susun HTML anda sebagai berikut:

<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>

Pendekatan ini menghasilkan titik utama dengan berkesan tanpa menggunakan imej atau penyelesaian JavaScript yang kompleks, memberikan persembahan yang bersih dan menarik secara visual.

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