Question

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

现在我修正了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%;
}

Answer 1

如果你想要真正的反应能力＆＃39;您可以使用与视口宽度直接相关的vw单位。

Jsfiddle Demo

支持不是很糟糕：CanIUse.com

＆＃13;

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

＆＃13;

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

＆＃13;

如何在css中使圆形链接响应？

1 个答案: