小编yne*_*nef的帖子

我一直在努力解决这个问题已有一段时间了.显然使用%宽度和高度是不够的？

现在我已经修复了100px的宽度和高度,边框半径是它的一半所以它会使它看起来圆.行高设置为100px,因此文本将垂直显示在这些圆圈的中间.我不知道如何以另一种方式垂直居中文字......

如何使此菜单响应,以便随着屏幕尺寸的变化而变小？

HTML:

<div id="menu">
 <ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul> 
</div>

CSS:

#menu ul {list-style-type: none; padding: 0; margin: 0;}
#menu li {display: inline; float: left;}
#menu a {
    display: block;
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: 1px #a2a2a2 solid;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1em;
    text-align: center;
    line-height: 100px;
    margin: 5%;
}