無序列表導航欄：如何使一些按鈕轉到導航頁面的右側？

Question

我在頂部使用CSS和HTML（我有一些代碼）制作了一個簡單的導航欄

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Products</li>
    <li>Contact</li>
    <li>Settings</li>
    <!--...-->
</ul>

等等，還有一點CSS display:inline魔術。 一切正常，只不過我想將某些鏈接（例如“設置”）移到導航欄的另一側，並用一個小圖標替換。 但是，我找不到如何執行此操作。 我嘗試過float:right並使用class將其應用於某些列表項，然后通過CSS引用它們。 我也嘗試了text-align:right ，但似乎沒有任何效果。 我在做什么錯？如何使某些列表項位於導航欄的右側？

Answer 1

試試這個->

工作演示

我將設置和寄存器放在div上，並添加了float:right將其推到右側。

如果要圖像，請用<img/>標記替換文本

Answer 2

我不確定您的html到底是什么樣子，但這對我有用

<div>
    <ul style="list-style: none; display:inline">
        <li>Home</li>
        <li>About</li>
        <li>Products</li>
        <li style="display:inline">Contact</li>
        <li style="display:inline; float:right;">Settings</li>
        <li>One More to Make Sure It Works</li>
    </ul>
</div

工作jsfiddle

Answer 3

我想說的就是完全列出另一個無序列表。 聽起來好像您要嘗試執行的操作不應同時在ul中完成。

可能有一種方法可以解決您的要求，但是似乎分開進行ul是最簡單的方法。