In HTML können Benutzer Listen sowohl in Reihenfolge als auch in nicht ordnungsgemäßen Formularen erstellen. Standardmäßig gibt es Zeilenumbrüche zwischen den Elementen in einer Liste. Manchmal möchten Sie jedoch die Daten der Liste in einer Zeile anzeigen, wie sie in der Navigationsleiste angezeigt werden. Zu diesem Zweck sind Entwickler erforderlich, um Linienpausen zwischen Listenelementen zu verhindern.
Diese Beschreibung wird demonstrieren:
So erstellen/erstellen Sie eine Liste in HTML?
Probieren Sie die angegebenen Anweisungen aus, um eine Liste in HTML zu erstellen.
Schritt 1: Erstellen Sie einen Div -Container
Erstellen Sie zunächst einen DIV -Behälter mit Hilfe des “" Schild. Auch ein "fügen Sie eine" hinzu "Klasse”Attribut und zuordnen einen Namen dem Klassenattribut gemäß Ihrer Präferenz zu.
Schritt 2: Erstellen Sie eine Liste
Als nächstes verwenden Sie die “
- Tee
- Kaffee
- Milch
- Saft
- Kaltes Getränk
- Minze
Infolgedessen wurde die Liste erfolgreich erstellt:
So verhindern Sie Zeilenumbrüche in Listenelementen mit CSS?
Wenn Sie Linienbrüche von Listenelementen mit CSS verhindern/entfernen möchten, wenden Sie die “anAnzeige”Eigenschaft mit dem Wert“Inline-BlockDas beseitigt Zeilenumbrüche in Listenelemente.
Für eine praktische Demonstration finden Sie die angegebenen Schritte.
Schritt 1: Stil „Div“ -Stil -Behälter
Um den Container zu stylen, greifen Sie zunächst auf die Klasse zu, indem Sie den Klassennamen mit einem Punktwähler als “verwenden.Main-div”. Wenden Sie dann die folgenden CSS-Eigenschaften an:
.Main-div
Grenze: 3px fest blau;
Rand: 20px 100px;
Hintergrundfarbe: RGB (100, 193, 236);
Hier:
Ausgang
Schritt 2: Verhindern Sie die Zeilenunterbrechung in der Liste
Greifen Sie mit Hilfe von auf die Liste zu “
li
Anzeige: Inline-Block;
Überlauf versteckt;
weißer Raum: Nowrap;
Text-Overflow: Ellipsis;
Nach dem angegebenen Code -Snippet:
Ausgang
Sie haben die Methode zur Verhinderung von Listenpausen durch die Verwendung der CSS -Eigenschaften erfahren.
Abschluss
Erstellen Sie zunächst eine Liste mit Hilfe des “