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

Answer 2

如果我理解正确，您只需要将保证金设为百分比，例如

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

查看this Fiddle，看看它是否符合您的要求。

Answer 3

我不相信只有使用CSS才能让文字在更改大小时留在圈内。

我建议你看看FitText，这是一个备受好评的Javascript脚本。

circle list-item中的导航文本不会流畅地缩小。相反，文字开始突然出现。

3 个答案: