Javascript 使用Zurb基金会在顶部栏中输入后缀按钮

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

但是，使用以下代码，按钮始终位于输入下方：

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

主页






搜寻

我也遇到了同样的问题，如果您看一下文档，就会知道如何正确地实现它

它位于示例代码段的底部：

  <li class="has-form">
    <form>
      <div class="row collapse">
        <div class="small-8 columns">
          <input type="text">
        </div>
        <div class="small-4 columns">
          <a href="#" class="alert button">Search</a>
        </div>
      </div>
    </form>
  </li>
  <li class="divider show-for-small"></li>
  <li class="has-form">
    <a class="button" href="#">Button!</a>
  </li>
</ul>

我遇到了与您相同的问题，经过一段时间后，通过将所有内容向左浮动并添加一些内容，我成功地解决了这个问题！重要信息和输入。 我在基金会文档中发现的并没有帮助，但无论如何，这都是骗局：

.left .search .button { float:left; width:50px; margin-left:5px;}
.search input {width:200px;float:left;top:5px;}
.search form {float:left !important; width:450px !important;}

---

对于基础5，这就是我如何解决这个问题：

nav.top-bar {
    $height: 1.8rem;
    $textFontSize: 0.8rem;

    .prefix, .postfix {
        /* So even though you can embed forms in the top nav, they get jankified.
           WOW.  This is kinda lame. */
        height: $height;
        line-height: $height;
        font-size: $textFontSize;

        i { 
            font-size: 0.8rem;
        }
    }

    .prefix {
        margin-top: 7px; 
    }

    .postfix {
        padding: 0;
    }

    input {
        font-size: $textFontSize;
        height: $height;
    }

---

我认为这在一定程度上起作用，但最后我放弃了，然后用推特引导程序进行了。这在基础5的顶部栏中不起作用。前缀/后缀大小不正确。这不正确。前缀/后缀添加不正确。我将表单放在

顶栏

之外，并使用

位置：绝对

使其显示在正确的位置。没有响应，但我为小屏幕隐藏了表单，因此它适用于我的情况。