带有 zurb 基础的水平导航

Question

我的页面上有一个水平导航，代码如下：

    <div class="row">
    <nav class="hide-for-small-only show-for-medium-up navi">
         <ul class="navigation">
          <li><a href="#what" id="whatanchor"><b>W</b>as<br> ist es?
</a></li>
          <li><a href="#why" id="whyanchor"><b>W</b>arum<br> brauchen 
Sie es?</a></li>
          <li><a href="#how" id="howanchor"><b>W</b>ie<br> 
funktioniert es?</a></li>
          <li><a href="#get" id="getanchor"><b>W</b>as<br> bekommen 
Sie?</a></li>
          <li><a href="#price" id="priceanchor"><b>W</b>as<br> 
bezahlen Sie?</a></li>
          <li><a href="#ask" id="askanchor"><b>W</b>elche<br> Fragen   
haben Sie?</a></li>
         </ul>
     </nav>
</div>

当我在较小的分辨率和其他屏幕上查看它时遇到问题，单独的导航点分解到下一行。但我希望它们变小并且不会破裂。

原页面的link为：Link

我希望有人能为我提供解决方案。

// 编辑：

每当我向下滚动时，我的导航也会跳转。

Answer 1

您可以使用媒体查询

1) 减少 right/left 填充

padding-right:0;
padding-left:0;

2) 使按钮横跨整个页面宽度

button 1
button 2
........
button 6

li{
display:inline-block;
width:100%;
}

3) 使按钮跨越页面的一半宽度

button 1 button 2
........ ........
button 5 button 6

li{
display:inline-block;
float:left;
width:50%;
}

带有 zurb 基础的水平导航

Horizontal Navigation with zurb foundation

html

css

zurb-foundation

zurb-foundation-5