html - 无法获得导航菜单链接以显示内联而不是一个接一个

Question

有了这个 html 片段，我试图让我的菜单显示在页面顶部，每个链接都位于上一个链接的右侧。然而，目前它们一个接一个地显示。我尝试使用显示的 CSS 对其进行样式设置。

有人可以告诉我这有什么问题吗？

<nav class="grid_4 topmenu">
    <ul>
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#">Our Cheeses</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
    </ul>
</nav>



.topmenu {
    display:inline; 
    margin: 2% 0;
        padding: 1% 0;
    text-align: right;
}

Answer 1

由于您将类添加到 nav 它不会工作，因为它display: inline;不在 li 标签中执行，他在 nav 标签中执行显示。

所以我所要做的就是添加.topmenu li元素.topmenu，就像这样：

.topmenu li {
    display:inline; 
    margin: 2% 0;
    padding: 1% 0;
    text-align: right;
}

小提琴

Answer 2

An alternative solution to @Yotam's suggestion is to use a left float with a list decoration of none.

The code looks like this:

.topmenu li {
    float: left;
    margin: 2%;
    padding: 1% 0;
    list-style-type: none;
}

jsfiddle