Question

有了这段html我试图让我的菜单显示在页面顶部，每个链接都在prev的右边。然而，此刻他们一个接一个地显示。我试图用显示的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

由于您已将该类添加到导航中，因此无法正常工作，因为display: inline;未在li标记中执行，他会在导航标记中执行显示。

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

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

fiddle

Answer 2

@ Yotam建议的另一种解决方案是使用左float，其列表装饰为none。

代码如下所示：

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

jsfiddle

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

2 个答案: