Wie erstelle ich führende Punkte für das Inhaltsverzeichnis nur mit CSS?

Führende Punkte für Inhaltsverzeichnisse mit CSS erstellen

Führende Punkte in einem Inhaltsverzeichnis zu erreichen kann schwierig sein, aber CSS bietet eine effektive Möglichkeit Lösung.

Nur ​​CSS Ansatz:

Wie von einer seriösen Quelle vorgeschlagen, löst die folgende reine CSS-Technik dieses Problem elegant:

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

Um diese Technik zu nutzen, strukturieren Sie Ihren HTML-Code wie folgt:

<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 Ansatz erzeugt effektiv führende Punkte ohne Der Rückgriff auf Bilder oder komplexe JavaScript-Lösungen sorgt für eine saubere und optisch ansprechende Präsentation.

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