Wie erstelle ich ein Inhaltsverzeichnis mit führenden Punkten nur mit CSS?

Führende Punkte für Inhaltsverzeichnisse in CSS erstellen

Beim Erstellen eines Inhaltsverzeichnisses ist es oft wünschenswert, führende Punkte zu verwenden, um ein Inhaltsverzeichnis zu erstellen strukturiertes und optisch ansprechendes Layout. Hier ist eine effektive reine CSS-Lösung, um dies zu erreichen:

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>

Dieser Code erstellt ein flexibles und optisch ansprechendes Inhaltsverzeichnis mit führenden Punkten. Die Größe des Inhalts wird dynamisch angepasst, sodass unabhängig von der Textlänge ein gleichbleibender Abstand gewährleistet ist.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Inhaltsverzeichnis mit führenden Punkten nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!