1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Wie kann ich verhindern, dass float: right die Positionen tauscht?

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von Moritz347, 5 Januar 2017.

  1. Moritz347

    Moritz347 Neues Mitglied

    Registriert seit:
    4 April 2016
    Beiträge:
    17
    Punkte für Erfolge:
    1
    Hallo,
    wie kann ich verhindern, dass float:right die Positionen tauscht?
    Wenn ich zum Besispiel den einzelnen Links float: right gebe, ändert sich die Reihenfolge... (bei einem Header)
    Hatte die Idee dem Text float: left zu geben und dem Elternelement float: right zu geben. klappt aber nicht... :(
    Schonmal danke für die Antworten
    Moritz
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.669
    Punkte für Erfolge:
    83
    Vergiss float, und wende Dich der zeitgemäßen Technik zu, mit der solche Fragen/Probleme erst garnicht aufkommen: CSS3 Flexbox.

    Da ich nicht einschätzen kann, wie gut es um Deine Englischkenntnisse bestellt ist, hier entsprechend nur eine Auswahl an deutschsprachigen Quellen:
     
  3. djheke

    djheke Aktives Mitglied

    Registriert seit:
    8 Februar 2012
    Beiträge:
    882
    Punkte für Erfolge:
    28
    Geht doch
    Code (text):
    1.  
    2. <!DOCTYPE html>
    3. <html>
    4. <head>
    5. <meta charset="utf-8">
    6. <title>Menu</title>
    7.  
    8. <style>
    9.  
    10. * {
    11.  margin:0;
    12.  padding:0;
    13.  list-style:none;
    14.  text-decoration:none;
    15. }
    16.  
    17. nav {
    18.  background:#333;
    19.  float:right;
    20. }
    21.  
    22. nav a {
    23.  float:left;
    24.  padding:10px;
    25.  color:#fff;
    26. }
    27. </style>
    28. </head>
    29. <body>
    30. <header>
    31. <nav>
    32. <a href="#">Home</a>
    33. <a href="#">Über uns</a>  
    34. <a href="#">Konzept</a>
    35. <a href="#">Impressum</a>
    36. </nav>  
    37. </header>  
    38. </body>
    39. </html>
    40.  
    Aber Flexbox wird wohl besser sein.