Link in Liste will zu viel Platz

seppomuc · #1 (**permalink**) 26.04.2016, 16:02

Hallo zusammen,

ich habe eine Liste, die ich folgendermaßen formatiert habe (damit zweizeilige Elemente bündig sind):

Code:

ul {
list-style: none;
}

li {
display: flex;
margin:5px 0px;
}

ul li:before {
content: "\b7\a0";
vertical-align: middle;
padding: 0px 5px;
display:table-cell;
}

Sobald ein Textlink eingefügt wird, lässt er keine zweite Zeile unter sich zu.

Anbei ein Screenshot. Dort sieht man eine zweizeilige Aufzählung ohne Link und darunter eine mit Link.

Liegt das irgendwie an display?

Links selbst sind nicht besonders gestyled, nur die Farbe.

cloned · #2 (**permalink**) 26.04.2016, 16:18

Kurz gesagt: Ja, das liegt am flex. Du hast dann mti einem Link zwei Elemente in deinem li, die richtet er dann natürlich auch flex-mäßig aus.

seppomuc · #3 (**permalink**) 26.04.2016, 16:31

Ah ok. Danke.
Wie kann ich das für den Link ausschließen? Ginge das so (sry. bin Anfänger):

Code:

li a{
display: block;
}

MrMurphy · #4 (**permalink**) 26.04.2016, 16:48

Hallo

Du solltest die alte bewährte Methode verwenden. Ich bin zwar ein Flexbox-Fan, aber für jeden Zweck ist es nicht geeignet.

Das CSS könnte zum Beispiel so aussehen:

Code:

      main {
         width: 94%;
         border: 3px solid blue;
         margin: 1rem auto;
      }
      ul {
         border: 3px solid green;
         list-style: none;
         padding-left: 0;
      }
      li {
         position: relative;
         margin-left: 3rem;
         margin-right: 2rem;
         margin-top: 0.8rem;
      }
      ul li::before {
         content: "❤";
         font-size: 0.8rem;
         position: absolute;
         left: -1.5rem;
         margin-top: 0.1rem;
      }

Die Rahmen (border) dienen nur dazu die Maße von main und ul anzuzeigen. Sie können natürlich entfernt und die anderen Maße können angepasst werden.

UTF-8-Zeichen können direkt kopiert werden, wie in meinem Beispiel das Herz. Sie müssen nur noch in Ausnahmefällen maskiert werden. Das macht den Quelltext übersichtlicher, da die Zeichen direkt erkannt werden können.

Eine gesamte Seite könnte folgendermaßen aussehen:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Liste formatieren 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      *, *::before, *::after {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
      }
      a {
         color: red;
         outline: none;
         text-decoration: none;
      }
      main {
         width: 94%;
         border: 3px solid blue;
         margin: 1rem auto;
      }
      ul {
         border: 3px solid green;
         list-style: none;
         padding-left: 0;
      }
      li {
         position: relative;
         margin-left: 3rem;
         margin-right: 2rem;
         margin-top: 0.8rem;
      }
      ul li::before {
         content: "❤";
         font-size: 0.8rem;
         position: absolute;
         left: -1.5rem;
         margin-top: 0.1rem;
      }
   }

   </style>
</head>
<body>
   <main role="main">
      <ul>
         <li>Seit zwei Jahren ist meine Arbeit in Düsseldorf. Meine Familie lebt dagegen in Hamburg. Und dazwischen ich, aber ganz cool. Vollbremskombination aus Ampel oder Einfädeln oder beides auf einmal.</li>
         <li>Geht nur mit Tricks. Eben noch kurz auf die A 52. Schon vielversprechend lebhaft. Hinter dem Breitscheider Kreuz geht es richtig los. Stau auf der A 3 bis Oberhausen. Danach entant es sich auch nur deshalb, weil enge Baustellen mit rüden Geschwindigkeitsbegrenzungen zum gleichmässigen Rollen zwingen.</li>
         <li><a href="">Es wird</a> links überholt, es wird rechts überholt. Es wird gar nichts mehr, alles steht und macht lange Gesichter. Ich dagegen wechsle die Cassette.</li>
         <li>Es geht weiter. Vor und hinter mir hektische Spurenwechsel. So zieht sich das Stück A 2 bis zum Recklinghauser Kreuz. Der erhofften Entanung folgt zuverlässig der Vollfrust. Die A 43 bis Münster ist genauso voll wie das Kamener Kreuz zur Rush-hour.</li>
         <li>Auf der A 1 ist dann endgültig Schluss mit lustig. Alles dümpelt auf der Überholspur. Natürlich mit 90. Rechts geht es schneller, irrerweise wegen der Lkws. Die wollen nämlich alle noch vor zehn zu Hause sein.</li>
         <li><a href="">Osnabrück</a>. <a href="">Dammer Berge</a>. Tanken, weil kleiner Tank. Nach Wildeshausen wird die Autobahn dreispurig. Klasse! Alles stürmt nach links, auch ein Kadett City mit Bochumer Kennzeichen. Bleibt hartnäckig. Blinker bringt auch nichts. Lichthupe ebenfalls zwecklos. Muss rechts vorbei. Ein Mittelscheitel macht den Breiten.</li>
         <li>Der Verkehr verzieht sich. Nach Stuckenborstel gehe ich vom Gas nicht mehr runter. Den Abzweig zum Elbtunnel mal wieder viel zu schnell genommen.</li>
         <li>Der Rest geht schnell. Entscheide mich natürlich wie immer für die linke Röhre, um dann nach Tunnelende dramatisch blitzartig vier Spuren nach rechts in die Ausfahrt hineinzubremsen. Das einzige, was auf der Stresemann wieder aufhält, ist eine kuriose Ampelschaltung. Am Phantom der Oper links, auf dem Ring einmal rundrum bis zum Winterhuder Marktplatz, dahinter noch mal links, zum Stadtpark hinunter. Ich bin da. Wieder zu spät. Alles schläft schon.</li>
         <li>Samstag. Sonntag. Deutschland guckt Tagesschau. Ich gucke in den linken Aussenspiegel. Dann drei Spuren rüber wieder in die linke Röhre. Diesmal doppelt so schnell durch den Tunnel wie auf dem Hinweg. Bleibe auf der linken Spur bis zum Abzweig Richtung Bremen. Der ist zweispurig, deshalb gibt es das beliebte Abbiegen-im-letzten-Moment-Spiel.</li>
         <li>Weil offensichtlich die Geschwindigkeitsbegrenzung vergessen wurde, bin ich drei Minuten später schon auf der Bremer Autobahn. Die Überholspur ist frei. Ein Fünfer will es wissen. Muss ein i sein, er lässt sich nicht abschütteln. Wie immer auf dem Rückweg säuft der Wagen wie ein Loch. An der Raststätte Wildeshausen bin ich fällig. Brauche auch noch was Süsses. Dann leiste ich mir mal wieder den höllisch teuren Trinkjoghurt in der ekligen Plastikflasche. Pinkeln kann entfallen. Superkurzer Tankstopp.</li>
      </ul>
   </main>
</body>
</html>

Gruss

MrMurphy

seppomuc · #5 (**permalink**) 27.04.2016, 12:47

super, danke. So hat das Hand und Fuß

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Listenelemente dynamisch an Breite anpassen	ronjambo	CSS	16	26.03.2009 18:16
Text ragt entweder hinaus oder wird verschoben	Der_FLo	CSS	3	25.07.2006 22:14
Liste (inline) Umbruch erzeugen	Steakfred	CSS	3	09.05.2006 12:27
Problem mit Hintergrund vom Sidebar!	Pumpkin	CSS	2	01.04.2006 04:14
Sidebarlänge dem Content anpassen?!	Pumpkin	CSS	2	14.03.2006 17:21