右对齐的导航栏

Question

导航菜单未向右对齐。 请帮忙！

** HTML代码：**

<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代码（不起作用）：**

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

我试过了，但是没有用：

nav#main {
    float: right;
}

Answer 1

尝试为导航项设置宽度或将其显示属性设置为嵌入式块。 这是一个块级元素，因此默认情况下会占用所有可用的水平空间。 因此，如果宽度为100％，您将看不到它的对齐/浮动位置。

nav#main {
   display: inline-block;
}

要么

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

Answer 2

试试这个，你不需要任何浮动，它的工作原理

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>