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标签的链接，不会水平堆叠，而是垂直移动

2 个答案: