我试图使用Zurb-Foundation在顶部栏中获取带有后缀按钮的文本输入,如下所示:http://foundation.zurb.com/docs/navigation.php#btopCode
但是,使用以下代码,按钮始终会在输入下方结束:
<nav class="top-bar">
<ul>
<li class="name"><h1>Home</h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
<section>
<ul class="left">
<li class="search">
<form class="collapse">
<input type="text">
<button type="submit" class="secondary radius button">Search</button>
</form>
</li>
<li class="has-dropdown">
<a href="#">Item1</a>
<ul class="dropdown">
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub3</a></li>
</ul>
</li>
</ul>
</section>
</nav>
像这样:
最佳答案
尝试将表单放在下拉列表中。我认为它本身不会直接在导航栏上起作用。该站点上没有对此进行很好的记录,可能会有一些改进。
<nav class="top-bar">
<ul>
<li class="name"><h1>Home</h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
<section>
<ul class="left">
<li class="has-dropdown">
<a href="#">Search</a>
<ul class="dropdown">
<li class="search">
<form>
<input type="search">
<button type="submit" class="secondary radius button">Search</button>
</form>
</li>
</ul>
</li>
<li class="has-dropdown">
<a href="#">Item1</a>
<ul class="dropdown">
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub3</a></li>
</ul>
</li>
</ul>
</section>
</nav>