Right-aligned navigation bar

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;
}

How about you use `float:right` on your `nav#main li` if you want it to be right-aligned — aMJay, Apr 27 '18 at 06:38
Thank you, but that re-orders the list (Work / About / Contact) becomes (Contact / About / Work), instead of moving it to the right. — chillout8, Apr 27 '18 at 07:08

score 0 · Answer 1 · answered Apr 27 '18 at 06:52

0

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*/
}

answered Apr 27 '18 at 06:52

Matias Valo

1

Forgot a semicolon from the latter option. Sorry. – Matias Valo Apr 27 '18 at 06:53
Thank you, the 1st suggestion re-orders the list (Work / About / Contact) becomes (Contact / About / Work), instead of moving it to the right. – chillout8 Apr 27 '18 at 07:11
2nd suggestion only makes the distance between the words smaller, but doesn't move the whole thing to the right. – chillout8 Apr 27 '18 at 07:11

score 0 · Answer 2 · answered Apr 27 '18 at 10:07

0

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>

answered Apr 27 '18 at 10:07

Faizal Hussain

1,551
2
10
18

Thank you, but unfortunately it doesn't work. I still get (Work About Contact) glued to the left side of the screen. – chillout8 Apr 28 '18 at 03:12

Right-aligned navigation bar

2 Answers2