float right

Hallo

Was Flex angeht, da muss ich mich erst mal einlesen, wobei die alle mit festen Breiten zu arbeiten scheinen.

Einlesen - ja, wenn du die Möglichkeiten von Flexbox nutzen willst.

Die Anwendung von Flexbox ist hingegen in der Praxis relativ easy. Zum Beispiel für dein Problem:

Am besten gibst du dem ul-Element zunächst eine Klasse, die noch nicht von Bootstrap verwendet wird:

Code:
   <ul class="meine_liste">
      <li>L1</li>
      <li>L2</li>
      <li>L3</li>
      <li>L4</li>
      <li>L5</li>
   </ul>

Dann räumst du dein CSS auf, so dass folgendes übrigbleibt und fügst bei li list-style-type:none hinzu:

Code:
      .meine_liste {
         background: orange;
         padding: 5px;
      }
      .meine_liste li {
         background: #dc143c;
         color: #fff;
         text-align: center;
         list-style-type: none;
         border: 1px outset gray;
         padding: 5px 10px;
         margin: 0 1px;
      }

Fehlt nur noch Flexbox:

Code:
      .meine_liste {
         display: flex;
      }
      .meine_liste li:nth-child(3) {
         margin-right: auto;
      }

Tut gar nicht weh. Das display: flex kannst du natürlich auch in die bereits bestehende CSS-Anweisung einfügen.

Jetzt bekommt nur noch das vorletzte li einen rechten oder das letzte li einen linken Abstand (margin).

Je nachdem, ob zukünftig noch weitere li-Elemente zu erwarten sind, kann das CSS auch bereits daraufhin angepasst werden. Mit

Code:
      .meine_liste li:nth-last-child(3) {
         margin-right: auto;
      }

können links noch weitere li-Elemente zu den drei hinzugefügt werden ohne dass das CSS angepasst werden muss.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Kleiner Nachtrag:

Das klappte eben nicht in meiner App, weil nav .navbar-nav (durch Bootstrap) auf float:left gesetzt war; habe ich nun auf float: none gesetzt.
Und statt navbar-right habe nun pull-right verwendet.

Mit diesen Hinweisen können vielleicht auch andere noch etwas auf die Beine stellen ...:D
 
Kleiner Nachtrag:

Das klappte eben nicht in meiner App, weil nav .navbar-nav (durch Bootstrap) auf float:left gesetzt war; habe ich nun auf float: none gesetzt.
Und statt navbar-right habe nun pull-right verwendet.

Mit diesen Hinweisen können vielleicht auch andere noch etwas auf die Beine stellen ...:D
Danke für das Feedback mit den aufklärenden Zeilen, damit zukünftige Hilfesuchende nicht am selben Problem scheitern :)
 
Zurück