输入在顶栏Postfix的按钮使用Zurb基金会

我试图让一个文本输入使用Zurb基金会在我最酒吧Postfix的按钮按如下说明：http://foundation.zurb.com/docs/navigation.php#btopCode 输入在顶栏Postfix的按钮使用Zurb基金会

但是，使用以下码按钮总是输入以下结束：

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

这样的： enter image description here

来源

2012-10-27 Se Norm

我把表格之外'顶部酒吧'，并使用'位置：绝对'，让它出现在正确的位置。没有响应，但我隐藏了小屏幕的表单，所以适用于我的情况。 –

尝试放置形式的下降的内部向下。我不认为它会直接在导航栏上自行工作。这在网站上没有很好的记录，可以使用一些改进。

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

来源

2012-11-02 13:16:15

我认为这在某种程度上有效，但最终我放弃了，而是使用twitter bootstrap。 –

我有同样的问题，如果你看看文档，你会看到如何正确实现它。

这是在该示例代码段的底部：

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

来源

2013-03-05 20:31:21 AntoNB

RTFM +1，man;应在默认答案处标记。 – jackyalcine

这不适用于Foundation 5中的顶部栏。前缀/后缀的大小不正确。 –

这是不正确的。前缀/后缀不能正确添加。 – RichOnRails

我有同样的问题，因为你Search input in top-bar foundation cut off和管理，使其通过浮动一切向左并添加了一些重要和经过一段时间的工作！投入。我在基金会的文档中发现什么没有用，但不管怎么说，这并获得成功：

.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;}

来源

2013-06-03 11:37:25 Callombert

对于基金会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; 
    }

来源

2014-06-21 20:51:05

这大部分工作。 – RichOnRails

输入在顶栏Postfix的按钮使用Zurb基金会

回答

相关问题