右对齐的导航栏

Question

Navigation menu doesn't align to the right. Please help!

** HTML code: **

<nav id="main">
    <ul>
        <li><a href="work.html">Work</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>   
</nav>

** CSS code (not working): **

nav#main li {
    float: left;
    text-decoration: none;
    text-align: center;
}

I tried this, but it didn't work:

nav#main {
    float: right;
}

Answer 1

Try setting a width to your nav item or setting it's display property to inline block. It's a block level element so by default it takes all the horizontal space that there's available. So if it's 100% wide you can't see where it's aligned/floated.

nav#main {
   display: inline-block;
}

or

nav#main {
   width: 50% /*for example*/
}

Answer 2

try this you don't need any float ,it works

nav#main ul li  {
text-align: right;
text-decoration: none;
display:inline-block;
}

#main{
text-align: right;
 }


<nav id="main">
<ul>
    <li><a href="work.html">Work</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>   
</nav>