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

试试这个 - ＆gt;

Working Demo

我已将设置和注册表放在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

Working jsfiddle

Answer 3

我要说完全再制作另一个无序列表。听起来你应该做的事情不应该在同一个ul中完成。

可能有一种方法可以做到这一点，但是看起来像制作单独的ul会是最简单的方法。

无序列表导航栏：如何使某些按钮位于导航页面的右侧？

3 个答案: