So verhindern Sie Zeilenumbrüche in Listenelementen mit CSS

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?
  • So verhindern Sie Zeilenumbrüche in Listenelementen mit CSS?

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 “

Tag, um eine ungeordnete Liste zu erstellen und die “einzufügen“
• ”Tag zum Hinzufügen von Daten zur Liste:

  
  

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

  • • “Grenze”Wird verwendet, um die Grenze um ein Element zu setzen.
    • “RandWird verwendet, um den Raum außerhalb der Grenze anzugeben.
    • “Hintergrundfarbe”Verteilt eine Farbe an der Rückseite des Elements.

  Ausgang

  
  Schritt 2: Verhindern Sie die Zeilenunterbrechung in der Liste

  Greifen Sie mit Hilfe von auf die Liste zu “

• Und wenden Sie die folgenden CSS -Eigenschaften an:

  li
  Anzeige: Inline-Block;
  Überlauf versteckt;
  weißer Raum: Nowrap;
  Text-Overflow: Ellipsis;
  

  
  Nach dem angegebenen Code -Snippet:

  • • “Anzeige"Eigenschaftswert wird als" festgelegt "Inline-Block”Zur Verhinderung von Linienbrüchen.
    • “Überlauf”Wird verwendet. Diese Eigenschaft bestimmt, ob er Text greifen oder Scrollbars hinzufügen soll, wenn der Inhalt eines solchen Elements in einem bestimmten Bereich eingestellt ist.
    • “weißer Raum”Wird verwendet.
    • “Text-Überfluss”Wird verwendet, um mit Umständen umzugehen, wenn der Text abgeschnitten wird und überläuft aus dem Feld des Elements.

  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 “

  Tag und fügen Sie Daten mit der „Daten hinzu“ hin
  • " Schild. Greifen Sie dann auf die Liste zu und wenden Sie die “anAnzeige" Eigentum. Setzen Sie den Wert als nächstes “Inline-BlockDas beseitigt Zeilenumbrüche in Listenelemente. Dieser Artikel hat Ihnen die einfachste Methode beigebracht.