✔ float right

[MrMurphy]

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:

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

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

      .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

      .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

 

[SpiceLab]

https://jsfiddle.net/spicelab/caxg5qpc/ mit eingeschobenen <ul></ul> für die beiden rechtsbündigen Elemente.

Netter Nebeneffekt gegenüber dem letzten Fiddle https://jsfiddle.net/spicelab/rso9m0p7/ : ihre Reihenfolge im HTML-Code wird bei der Ausgabe nicht vertauscht

 

[SpiceLab]

Thema gelöst.

PS: Was wäre ich ohne Spicelab

phwert-SpiceLab=phwert (wobei Äpfel von Birnen nicht subtrahiert werden können)

Jaja... wir zwei haben hier in den vergangenen 12 Monaten schon so einiges gemeinsam auf die Beine gestellt

 

[jemand anders]

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 ...

 

[SpiceLab]

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 ...

Danke für das Feedback mit den aufklärenden Zeilen, damit zukünftige Hilfesuchende nicht am selben Problem scheitern