Change of order in nav because of the css

Question

Change of order in nav because of the css

Navigation

#1 by (1 votes)

1

I have a problem with my browser and it is that when I put it in the position I want (on the right side) it changes all the order that I have given it in the HTML. Is there any solution? I leave the code here and many thanks in advance.

HTML   <nav class="menu">
        <ul>
            <!-- error, no tiene el mismo orden que aquí que en la web  -->
            <li><a href="#work">Work</a></li>
            <li><a href="#about">About me</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>

    </nav>

SCSS-CSS  nav{
    width: 100%;
    float: left;
    ul{
        list-style: none;
        padding: 25px;

        li{
            text-align: right;
            a{
               float: right;
               font-family: Lato;
               font-size: 16px;
               color:$whit;
               display: inline;
               margin: 0 40px;
               padding: 10px;
               border: 2px solid;
               width: 150px; 
               text-align: center;
                a .work{
                    margin-left: 30px;
                }
            }
        }
    }
}

}

html css scss

asked by Rocio Cejudo 30.06.2018 в 15:03

source

1 answer

how to call a name with duplicate condition Oracle sql? Optimize a MySQL query that puts the server at 100% CPU

score 1 · Accepted Answer

What happens is that you are giving a float: left to the nav, and you are giving it a float: right. That's why it's on the other side you only need to change the float: right to float: left of a

    nav{
  width: 100%;
  float: left;
    }

  ul{
    list-style: none;
    padding: 25px;
}
    li{
      text-align: right;
}
      a{
        float: left;
        font-family: Lato;
        font-size: 16px;
        color: #262626;
        display: inline;
        margin: 0 40px;
        padding: 10px;
        border: 2px solid;
        width: 150px;
        text-align: center;
}
        a .work{
          margin-left: 30px;
}

<nav class="menu">
        <ul>
            <!-- error, no tiene el mismo orden que aquí que en la web  -->
            <li><a href="#work">Work</a></li>
            <li><a href="#about">About me</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>

    </nav>