使用Zurb Foundation在顶部栏中使用后缀按钮输入 [英] Input with Postfix Button in Top-Bar using Zurb Foundation

问题描述

我正尝试使用Zurb-Foundation在顶部栏中获取带有后缀按钮的文本输入，如下所述:

I am trying to get a Text-Input with a Postfix Button in my Top-Bar using Zurb-Foundation as explained here: http://foundation.zurb.com/docs/navigation.php#btopCode

但是，使用下面的代码，按钮总是在输入下方结束:

However, using the following code the button always ends up below the input:

<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>

像这样:

推荐答案

尝试将表单放在下拉列表中.我认为它不会直接在其自身的导航栏上运行.该网站上没有对此进行很好的记录，可能会有一些改进.

Try placing the form inside of a drop down. I don't think it will work directly on the nav bar it self. This is not documented well on the site and could use some improvement.

 <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>

这篇关于使用Zurb Foundation在顶部栏中使用后缀按钮输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！