我的 ul 菜单，链接附加到 li 标签，不会水平堆叠，而是垂直堆叠

Question

使用基础菜单 (http://foundation.zurb.com/sites/docs/menu.html) 我遇到了一个问题，即向 li 标签添加链接意味着菜单不再是水平的而是垂直的。谁能给我指出正确的方向。

<div class="row">
<div class="small-12 columns">
<ul class="menu">
    <li class="li1"><a href="#">Home</a></li>
    <li class="li2"><a href="#">About</a></li>
    <a href="#"><li class="li3">Products</li></a>
    <a href="#"><li class="li4">Services</li></a>
    <a href="#"><li class="li5">Contact</li></a>
</ul>
</div>
</div>

Answer 1

li {
    display: inline;
}

或

.specific-li-class{
    display: inline;
}

为了完整起见，如 Jan P 所述，a 标签位于正确位置的代码

<div class="row">
<div class="small-12 columns">
<ul class="menu">
    <li class="li1"><a href="#">Home</a></li>
    <li class="li2"><a href="#">About</a></li>
    <li class="li3"><a href="#">Products</a></li>
    <li class="li4"><a href="#">Services</a></li>
    <li class="li5"><a href="#">Contact</a></li>
</ul>
</div>
</div>

Answer 2

您的代码有误，不允许 a 作为 ul 的直系子代。您的代码必须是这样的：

<div class="row">
<div class="small-12 columns">
<ul class="menu">
    <li class="li1"><a href="#">Home</a></li>
    <li class="li2"><a href="#">About</a></li>
    <li class="li3"><a href="#">Products</a></li>
    <li class="li4"><a href="#">Services</a></li>
    <li class="li5"><a href="#">Contact</a></li>
</ul>
</div>
</div>

我的 ul 菜单，链接附加到 li 标签，不会水平堆叠，而是垂直堆叠

My ul menu, with links attached to the li tags, won't stack horizontally but goes vertical instead

css

menu

zurb-foundation