CODEWITHSUNDEEP
htmlcss
Kyle
Kyle

Reputation: 1

html navigation bar. logo goes to left, and items go to right. items order reverse. How to change order?

I want to create a navigation bar. Logo should go to left, and items should go to right. I don't know why Items always make reverse order in my navigation bar.

ul {
  margin: 0;
  padding: 0;
  list-style: none;           /* remove the markers/bullets */
  display: block;              /* Displays an element as a block-level flex 
  container */
}

/* Each item in the navigation bar */
li {
  line-height: 65px;          /* The height of the each iterm is 65px */
  font-size: 20px;            /* Font size is 14 px */
  background-color: green;
  width: 200px;
  text-align: center;
  float: right;
}

li:first-child{
  float:left;
  margin-left: 200px;
}
<header>
  <ul>
      <li class="logo"><a href="#">LOVE</a></li>
      <li class="direction-item"><a href="">item1</a></li>
      <li class="direction-item"><a href="">item2</a></li>
      <li class="direction-item"><a href="">item3</a></li>
      <li class="direction-item"><a href="">item4</a></li>
      <li class="direction-item"><a href="">item4</a></li>
  </ul>
</header>

Upvotes: 0

Views: 94

Answers (1)

Lex
Lex

Reputation: 5014

It's the float right causing the other items to display in reverse order.

ul {
  margin: 0;
  padding: 0;
  list-style: none;           /* remove the markers/bullets */
  display: block;              /* Displays an element as a block-level flex 
  container */
}

/* Each item in the navigation bar */
li {
  font-size: 20px;            /* Font size is 14 px */
  background-color: skyblue;
  padding: 10px;
  text-align: center;
  float: right;
}

li:first-child{
  float:left;
}
<header>
  <ul>
      <li class="logo"><a href="#">LOVE</a></li>
      <li class="direction-item"><a href="">item1</a></li>
      <li class="direction-item"><a href="">item2</a></li>
      <li class="direction-item"><a href="">item3</a></li>
      <li class="direction-item"><a href="">item4</a></li>
      <li class="direction-item"><a href="">item5</a></li>
  </ul>
</header>

Floats are still fine to use, but more of a CSS2 approach. With CSS3 we have flex-box which has more options, making it more complex. But also offers more flexibility :p run the following code snippet to see a flex-box solution. 

ul {
  display: flex;
  list-style: none;
}

li {
  flex: 1 1 auto;
  text-align: right;
}

li.logo {
  text-align: left;
}
  <header>
    <ul>
        <li class="logo"><a href="#">LOVE</a></li>
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
        <li><a href="#">item4</a></li>
        <li><a href="#">item5</a></li>
    </ul>
  </header>

Upvotes: 2

Related Questions