• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

br in einzelnem li setzen

F

faen97

Neues Mitglied
Hallo liebe Community,
bin noch ganz neu im Bereich HTML CSS unterwegs, deshalb verzeiht mir wenn diese Frage für euch etwas banal klingt...

Ich möchte eine horizontale Navigationsleiste per <ul> machen, eines der li soll über 2 Zeilen geschrieben werden. Wenn ich allerdings ein <br> setze habe ich die eigentlich dahinter befindlichen li auch in der nächsten Zeile...

<ul>
<li>Text1</li>
<li>Zeile1<br>Zeile2</li>
<li>Text3</li>
</ul>

Aussehen soll es ca. so:

Text 1 Text 2a Text 3
Text 2b

Aussehen tut es so:

Text 1 Text 2a
Text 2b Text 3
 
Werbung:
Mit den Quellcodeschnipseln können wir wenig anfangen. Ohne CSS stehen 4 Zeilen untereinander. Du zeigst uns also nicht den gesamten Quelltext.

Beschäftige dich mit Flexbox. Vergiß float und position.
 
Meine aktuelle index.html sieht so aus:

<ul id="Navbar">
<li><a href="index.html">Home</a></li>
<li><a href="unsereLeistungen.html">Unsere Leistungen</a></li>
<li><a href="überUns.html">Über uns</a></li>
<li><a href="referenzen.html">Referenzen</a></li>
</ul>

Mein CSS so:

#Navbar li {
display: inline;
font-size: 80%;
}


Flexbox werde ich mir näher ansehen, danke.
 
Werbung:
Ich erkenne in dem Quelltext kein br-Element.

Mit deinen Angaben und einem von mir eingefügten br-Element kann ich mir folgenden Quelltext vorstellen:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Listenlayout 01</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      #Navbar {
         display: flex;
      }
      #Navbar li {
         font-size: 80%;
         list-style-type: none;
         margin: 0.5rem;
      }
   </style>
</head>
<body>
   <ul id="Navbar">
      <li><a href="index.html">Home</a></li>
      <li><a href="unsereLeistungen.html">Unsere<br>Leistungen</a></li>
      <li><a href="überUns.html">Über uns</a></li>
      <li><a href="referenzen.html">Referenzen</a></li>
   </ul>
</body>
</html>

Damit du überhaupt erst mal ein praktisches Beispiel für eine vollständige Webseite hast. Auch wenn ich selbst aus Erfahrung noch einige Änderungen vornehmen würde.
 
<br> hatte ich vergessen wieder einzusetzen, hatte das wegen Testzwecken gerade nicht drun, tut mir leid.

#Navbar {
display: flex;
}

Das hat mir gefehlt und mein Problem gelöst, danke vielmals.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben