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

我希望任何人都有解决方案。

//编辑：

每次向下滚动时，我的导航都会跳转。

Answer 1

您可以使用媒体查询

1）减少右/左填充

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基础的水平导航

1 个答案: