UL Und LI: HTML-Liste Linksbündig Ohne Einrücken

Forum Tipps News Frage stellen Home Suchen Windows

• Windows Tipps
• Windows Hilfe-Forum

Hardware

• Hardware Tipps
• Hardware-Forum
• Netzwerk-Forum
• Speedport.ip

Software

• Software Tipps
• Software Hilfe-Forum

Apple

• Apple Tipps
• Apple Hilfe-Forum
Screenshot Mac

Handy & Tablet

• iPhone & iPad Forum
• iPhone und iPad Tipps
• Android Forum
• Android Tipps

• anmelden
• |
• Hilfe
• |
• Frage stellen

• Windows
  • Windows-Forum
  • Windows-Tipps
  • Windows-Downloads
  • Frage stellen
• Hardware
  • Hardware-Forum
  • Netzwerk-Forum
  • Smart-Home Forum
  • Hardware-Tipps
  • Smart-Home Tipps
  • Hardware Frage stellen
  • Netzwerk Frage stellen
• Software
  • Software-Forum
  • Sicherheits-Forum
  • Messenger & Chat Forum
  • Software-Tipps
  • Word-Tipps
  • Excel-Tipps
  • Software Frage stellen
  • Sicherheits Frage stellen
• Handy / Tablet
  • iPhone / iPad Forum
  • iPhone / iPad Tipps
  • Android-Forum
  • Android-Tipps
  • Windows Phone Forum
  • Andere Handy & Telefone
  • Frage stellen
• Apple
  • Apple Mac Forum
  • Apple Tipps
  • Foto-Tipps
  • Apple-Downloads
  • Frage stellen
• Linux
  • Linux-Forum
  • Linux-Tipps
  • Linux-Downloads
  • Frage stellen
• Spiele
  • Spiele-Forum
  • Spiele-News
  • Spiele-Tests
  • Frage stellen
• Community
  • Chat
  • OffTopic-Forum
  • Technik-Diskussion
  • Witze Bereich
• mehr
  • Mein Menü
  • Foren-Übersicht
  • Tipps-Übersicht
  • Technik-Lexikon
  • Computerkurs
  • Entwickler
  • Webmaster-Forum
  • Programmieren-Forum
  • Foto/Design-Forum
  • Sonstiges
  • Computerhilfen News
  • Regeln
  • Netiquette
  • Datenschutz
  • Kontakt & Impressum

UL und LI: HTML-Liste linksbündig ohne einrücken

1. Computerhilfen
›
2. Info
›
3. Webmaster

3 Leser haben sich bedankt UL und LI: HTML-Liste linksbündig ohne einrücken (Durchschnitt: 5,00 von 5 bei 1 Stimmen) Loading...

Normalerweise zeigen die Browser die <ul> Listen mit einer Einrückung an: die einzelnen Listenpunkt <li> sind mit kleinem Abstand nach links eingerückt. Für Listen-Aufzählungen ist das zwar praktisch, kann aber stören, wenn man das Layout der Seite etwas genauer planen muss. Hier hilft unser Tipp: Damit kann man den Abstand entweder so einstellen, wie er sein soll – oder aber die Einrückung ganz weglassen, damit die einzelnen LI Elemente linksbündig angezeigt werden.

UL linksbündig: So bleibt die Liste links!

Damit die Listen-Punkte linksbündig angezeigt werden, muss man im UL Element den Abstand einstellen und per CSS soohl die Werte für Margin und Padding auf „0“ setzen. Möchte man den Abstand der Listenpunkte selbst einstellen, kann man hier selber einen Wert vorgeben, den die Browser dann einstellen: So kann man angeben, wie weit die einzelnen Listen-Elemente nach rechts eingerückt angezeit werden.

Der Code für das Einrücken ist ganz einfach: In das UL Element werden die padding und margin Abstände direkt geschrieben – oder per CSS-Klasse:

<ul style="margin:0;padding:0;"> <li>Punkt 1</li> <li>Punkt 2</li> </ul>

oder:

<style type="text/css"> .liste { margin:0; padding:0; } </style> <ul class="liste"> <li>Punkt 1</li> <li>Punkt 2</li> </ul>

Mit dem linksbündig setzen der Liste rutscht dann aber, wenn man margin und padding auf „0“ setzt, auch der Listenpunkt zu Beginn eines jeden LI Elements nach links aus dem eigentlichen Textbereich heraus. Hier hilft es dann, den Listenpunkt mit „list-style:none“ im UL Tag zu deaktivieren.

HTML Liste linksbündig: So sieht es aus:

• Punkt 1
• Punkt 2

HTML Liste linksbündig und ohne Punkte:

• Punkt 1
• Punkt 2

Der Quellcode dazu:

<ul style="margin:0;padding:0;list-style:none;"> <li>Punkt 1</li> <li>Punkt 2</li> </ul> Fragen zu diesem Tipp? In unserem Webmaster-Forum helfen wir weiter! Das könnte Sie auch interessieren:

• UL und LI: HTML-Liste linksbündig ohne einrücken
• UL und LI: HTML-Liste linksbündig ohne einrücken
• UL und LI: HTML-Liste linksbündig ohne einrücken
• UL und LI: HTML-Liste linksbündig ohne einrücken
• Vorsicht: WIFI-Calling kann im Urlaub teuer werden
• Klassisches Firefox-Menü einblenden
• Vorsicht: WIFI-Calling kann im Urlaub teuer werden

Ähnliche Fragen:

• Liste von gehackter Router

  Hallo,ich habe eine "FRITZ!Box Fon WLAN" und wollte Fragen, ob diese schon geh...

• Liste alphabetisch ordnen

  Hallo, ich habe ca. 250 Songtitel.Wie kann ich die alphabetisch ordnen?Danke für Tips....

• Liste für erreichbare internetseiten

  Habe eine liste mit erreichbaren internetseiten bekommen wie kann ich das umgehen ??? Danke im...

• MRU Liste in Windows 8/10 löschen

  Hallo, ich habe ein kleineres Problem. Immer wenn ich meinen Arbeitsplatz öffne und in die Suchleis...

• Autostart- Liste im Ordner verschwunden...

  HalloDer Ordner *Autostart* zeigt, einfach so, leer an.Wie komme ich an die Autostart-Anzeige? Kann ...

» Top Tipps: Diese Tipps sind heute beliebt

• Frageassistent 1 (Seite 2) (76x gelesen)
• pc-einsteigerkurs (35x gelesen)
• datenschutz (13x gelesen)
• pc-einsteigerkurs-2-3 (10x gelesen)
• windows-beschleunigen (8x gelesen)

Passende Wörter im Lexikon: HTMLHTML steht für Hyper Text Markup Language, ist die Sprache, mit der Internetseiten kodiert werden. Es handelt sich dabei um ASCII Text, in den die HTML Befehle einge...XHTMLDie Extensible Hypertext Markup Language, kurz XHTML, ist eine textbasierte Auszeichnungssprache zur semantischen Auszeichnung von Bildern, Texten und Hyperlinks in Dokum...BrowserDer Browser oder Webbrowser ist das Programm, dass die HTML - Befehle einer Internetseite mit Bildern, Videos und Texten auf dem Bildschirm anzeigt. Der Browser ist also ...

• Webbrowser
• Browser Verlauf

Mehr Tipps zu UL und LI: HTML-Liste linksbündig o...

• HTML: <ul> Liste mit andersfarbigen oder größeren Listen-Punkten Um die Listen-Punkte oder Bullet-Points einer <ul> Liste einzufärben, muss man auch die Textfarbe der Liste ändern. Möchte man dies nicht, kann man mit CSS...
• Facebook Freundesliste verbergen & verstecken Facebook zeigt im eigenen Profil auch die Freundesliste an, in der alle Personen zu sehen sind, mit denen man auf Facebook befreundet ist. Ist die...
• Facebook Freundesliste verbergen & verstecken Facebook zeigt im eigenen Profil auch die Freundesliste an, in der alle Personen zu sehen sind, mit denen man auf Facebook befreundet ist. Ist die...
• Lösung: Das bedeuted der grüne / orange Punkt oben im iPhone Display! Wird oben im iPhone Display ein grüner oder orangener Punkt angezeigt, meldet das iPhone einen Mikrophon- oder Kamera-Zugriff einer App. Seit iOS 14 meldet ein...
• Lösung: Das bedeuted der grüne / orange Punkt oben im iPhone Display! Wird oben im iPhone Display ein grüner oder orangener Punkt angezeigt, meldet das iPhone einen Mikrophon- oder Kamera-Zugriff einer App. Seit iOS 14 meldet ein...
• OpenOffice / LibreOffice: Zeilenabstand ändern So geht's: Den Zeilenabstand ändern in OpenOffice und LibreOffice! Wenn der normale Zeilenabstand im Dokument nicht ausreicht, kann man den Zeilenabstand leicht ändern: Zum Beispiel...

© Computerhilfen.de (42.038x gelesen)UL und LI: HTML-Liste linksbündig ohne einrücken