Prawostronne menu

Question

Chcę, żeby menu było z prawej strony i załatwia tą sprawe float: right, ale gdy ustawiam width tła na 100% to wraca so pozycji wyjściowej. Jak oddzielić tło od <li>?

HTML:

<nav id="navbar">
   <ul class="navigation">
     <li><a href="#welcome-section">About</a></li>
    <li><a href="#projects">Work</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>   
</nav>

CSS:

.navigation {  
   float: right;
   background-color: green;
   width: 100%;
   margin: 0;
   display: flex;
   list-style: none;
}
   
   li a {
   font-size: 1.2em;
   width: 130px;
   text-decoration: none;
   color: aqua;
   padding: 0px 10px 0px 1px;
   }

Answer 1

Cześć .

.navigation {  
   background-color: green;
   width: 100%;
   margin: 0;
   display: flex;
   justify-content: end;
   padding: 0;
   list-style: none;
}

Jeżeli używasz flexbox'a to justify-content: end;  jest naturalnie wskazany

Usuń float'a..

Comments

justify-content: flex-end;
padding: 0;

Napisałeś błędną  wartość justify-content

oraz jest potrzebny jeszcze reset padding

---

@pablop76,

zródło

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

"end"

[ "The items are packed flush to each other toward the end edge of the alignment container in the main axis."]

Mógłbyś sprecyzować dlaczego (flex-end) a nie (end)?

Z resetem liczyłem na to że kolega sobie poradzi... albo zada odpowiednio sprecyzowane pytanie .

Dziękuję za Uwagę

---

Podczas testu na codepen w chrome 'end' nie działa, wiec można przypuszczać, że istnieje różnica miedzy tymi wartościami. Pewnie chodzi o wsparcie skróconej nazwy.

---

@pablop76

W Firefox wszystko działa jak należy. Sprawdziłem dwa razy ...

źródło

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Nie wspomina o braku wsparcia. Wygląda na to że przeglądarki interpretują odmiennie i testy trzeba prowadzić w wielu przeglądarkach.

tak czy inaczej.

Dziękuję Ci Pablo za Uwagę   i życzę Ci miłego dnia.

Pozdrawiam Serdecznie

 

 

---

Dzięki chłopaki teraz działa, a co do waszej rozmowy na VSCode też flex-end sprawdza się lepiej.

---

 

wygląda na to że bezpieczniej jest używać "flex-end" i testy przeprowadzać w przynajmniej dwóch przeglądarkach