HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

W3.CSS- Listen

❮ Vorherige Nächste ❯
  • ×
    Mike
    Webdesigner
  • ×
    Jill
    -Unterstützung
  • ×
    Jane
    Buchhalterin

Basisliste

Die Klasse w3-ul wird verwendet, um eine Grundliste anzuzeigen:

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Umrandete Liste

Die Klasse w3-border fügt einen Rahmen um die Liste hinzu:

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Listenkopf

Ein Beispiel für das Hinzufügen eines Überschriftenelements innerhalb des Listenelements:

  • Namen

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-border">
  <li><h2>Names</h2></li>
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Liste als Karte

Die w3-Kartennummernklassen können verwendet werden, um eine Liste als Karte anzuzeigen:

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-card-4" style="width:50%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Zentrierte Liste

Die Klasse w3-center kann verwendet werden, um die Listenelemente in einer Liste zu zentrieren:

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Farbige Liste

Die w3 -Farbklassen können verwendet werden, um der Liste eine Farbe hinzuzufügen:

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Farbiger Listeneintrag

Die w3 -Farbklassen können verwendet werden, um dem Listenelement eine Farbe hinzuzufügen:

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul">
  <li class="w3-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Hoverable-Liste

Die Klasse w3-hoverable fügt jedem Listenelement beim Mouseover eine graue Hintergrundfarbe hinzu:

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Wenn Sie eine bestimmte Hover-Farbe wünschen, fügen Sie jedem <li>-Element eine der w3-hover- color -Klassen hinzu:

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul">
  <li class="w3-hover-red">Jill</li>
  <li class="w3-hover-blue">Eve</li>
  <li class="w3-hover-green">Adam</li>
</ul>

Abschließbares Listenelement

Klicken Sie auf das "x", um einen Listeneintrag zu schließen/auszublenden:

  • Jill ×
  • Adam ×
  • Vorabend ×

Beispiel

<li class="w3-display-container">Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-right">&times;</span>
</li>

Tipp: Das HTML × Entität ist das bevorzugte Symbol für Schließen-Schaltflächen (und nicht der Buchstabe "X").

Liste mit Polsterung

Die w3-Padding- Klassen können verwendet werden, um Auffüllungen zu Listenelementen hinzuzufügen: 

  • Jill
  • Vorabend
  • Adam
  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul">
  <li class="w3-padding-small">Jill</li>
  <li class="w3-padding-small">Eve</li>
  <li class="w3-padding-small">Adam</li>
</ul>

Avatar-Liste

  • ×
    Mike
    Webdesigner
  • ×
    Jill
    -Unterstützung
  • ×
    Jane
    Buchhalterin

Beispiel

<li class="w3-bar">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-bar-item w3-button w3-xlarge w3-right">&times;</span>
  <img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
  <div class="w3-bar-item">
    <span class="w3-large">Mike</span><br>
    <span>Web Designer</span>
  </div>
</li>

Tipp: Mehr über die w3-bar Klassen erfahren Sie in unseren Kapiteln W3.CSS Bars und W3.CSS Navigation .

Listenbreite

Listen haben standardmäßig eine Breite von 100 %. Verwenden Sie die width-Eigenschaft, um dies zu ändern.

Beispiel

<ul class="w3-ul" style="width:30%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

30% Breite:

  • Jill
  • Adam

50 % Breite:

  • Jill
  • Adam

80 % Breite:

  • Jill
  • Adam

Winzige Liste

Verwenden Sie die Klasse w3-tiny , um eine winzige Liste anzuzeigen: 

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Kleine Liste

Verwenden Sie die Klasse w3-small , um eine kleine Liste anzuzeigen:  

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Große Liste

Verwenden Sie die Klasse w3-large , um eine große Liste anzuzeigen: 

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Große Liste

Verwenden Sie die Klasse w3-xlarge , um eine besonders große Liste anzuzeigen:  

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

XXLgroße Liste

Verwenden Sie die w3-xxlarge- Klasse, um eine XXLarge-Liste anzuzeigen:  

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

XXXGroße Liste

Verwenden Sie die Klasse w3-xxxlarge , um eine XXXLarge-Liste anzuzeigen:  

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Jumbo-Liste

Verwenden Sie die w3-jumbo- Klasse, um eine riesige "Jumbo"-Liste anzuzeigen:  

  • Jill
  • Vorabend
  • Adam

Beispiel

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

❮ Vorherige Nächste ❯