Question

我需要帮助我网站上的一些菜单项。问题是，我想我过去已经解决了这个问题，但我已经忘记了我是如何解决这个问题的。我有大约7个菜单链接，我浮动，如果我的浏览器完全最大化，它看起来很好，因为它涵盖整个与但当浏览器恢复到较小的大小时，它将一些链接推到底部。下面是html和css。

 #menu  a
 {
 float:left;        
 padding:16px 20px;
 color:#fff;
 background-color:#000;
 display:block; 
 border-right:1px solid #646464;
 text-align:center;
 font-size:90%;
 }

 <div id="menu">
 <a href="">Home</a>
 <a href="">About us</a>
 <a href="">Services</a>
 <a href="">Products</a>
 <a href="">Portfolio</a>
 <a href="">Frequently Asked Question</a>
 <a href="">Contact us</a>
 </div>

问题是，我想以这样的方式，当浏览器的宽度较小或浏览器大小减小时，它应该减小字体的大小，并可能减少每个链接的填充大小。

Answer 1

问题是，你有一个固定的填充值...所以如果浏览器小于推理填充像素...它将不适合...

一种可能的解决方案是，删除水平填充并使用相对宽度值......

如下：

#menu  a{
 float:left;        
 padding:16px 0;
 color:#fff;
 background-color:#000;
 display:block; 
 border-right:1px solid #646464;
 text-align:center;
 font-size:90%;
 width:14%
 }

 <div id="menu">
 <a href="">Home</a>
 <a href="">About us</a>
 <a href="">Services</a>
 <a href="">Products</a>
 <a href="">Portfolio</a>
 <a href="">Frequently Asked Question</a>
 <a href="">Contact us</a>
 </div>

如何缩小链接菜单

1 个答案: