右對齊的導航欄

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>