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;
}
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*/
}
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.