html - 圆列表项中的导航文本不会流畅地收缩。相反，文本开始突出。

Question

我将导航列表项四舍五入，并将链接文本置于其中。但是，当我缩小浏览器窗口时，因为我正在尝试创建一个流畅的网站，圆圈会重新调整大小，而文本不会随之按比例调整大小。

我认为这与 li a 或 li 的填充或宽度值有关。但是，我尝试将固定值调整为百分比值，但问题仍然存在。

下面是HTML

<nav>
    <ul>
        <li class="circle"><a href="about.html">About</a></li>
        <li class="circle"><a href="coding.html">Coding</a></li>
        <li class="circle"><a href="health.html">Health</a></li>
        <li class="circle"><a href="contact.html">Contact</a></li>
    </ul>
</nav>

下面是CSS

nav {
    text-align: center;
    padding: 0 0;
    margin: 10px 0 0;
}

nav ul {
    list-style: none;
    margin: 0; 10px;
    padding: 0;
}

nav li {
    display: inline-block;
    font-size: 0.8em;
  margin: 50px;
  padding: 2%;
  border: 1px solid black;
}

nav a {
  padding: 3em;
}

.circle {
    position: relative;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    line-height: 1px;
    text-align: center;
}

.circle a {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Answer 1

只需在您的 css 开头添加:

* { padding: 0; margin: 0; overflow: hidden;}

Live Demo