Html 删除菜单项上的文本

我有一个菜单结构：

<ul id="footer-nav">
    <li id="button1"><a href="#page-1">a</a></li>
    <li id="button2"><a href="#page-2">a</a></li>
    <li id="button3"><a href="#page-3">a</a></li>
    <li id="button4"><a href="#page-4">a</a></li>
    <li id="button5"><a href="#page-5">a</a></li>
    <li id="button6"><a href="#page-6">a</a></li>
    <li id="button7"><a href="#page-7">a</a></li>
    <li id="button8"><a href="#page-8">a</a></li>
</div>

---

单击菜单项时，转到第页。没关系。但我想，菜单项上没有文本，所以当我删除结构上的

a

文本时，我的菜单项不可点击。我该如何解决它呢？

这是因为您的

a

在为空时不会占用任何空间，因此无法单击

您可以添加以下CSS来解决此问题：

ul#footer-nav li a {
    display: inline-block; /* important for the width and height to take effect */
    width: 60px; /* or whatever */
    height: 20px; /* or whatever */
}

---

这是因为您的

a

在为空时不会占用任何空间，因此无法单击

您可以添加以下CSS来解决此问题：

ul#footer-nav li a {
    display: inline-block; /* important for the width and height to take effect */
    width: 60px; /* or whatever */
    height: 20px; /* or whatever */
}

---

如果删除文本，则将没有高度。更改css以包含锚定标记的宽度和高度，如果删除文本，锚定标记将不会有高度。更改css以包含锚定标记的宽度和高度，它应该可以正常工作

#footer-nav li a {
    display: inline-block;
    width: 50px; 
    height: 20px;
}

试试这个

#footer-nav li a {
    display: inline-block;
    width: 50px; 
    height: 20px;
}

---

如何删除文本？@adeneo我相信插入的

a

文本仅用于测试。他们显然会从源代码中手动删除

a

文本。那么如何删除文本？@adeneo我相信插入

a

文本只是为了测试。他们显然会从源代码中手动删除

a

文本。为了便于访问，我至少会在锚定标记中包含

title

属性。这涵盖了更多内容。可能使用

width:100%和``高度：100%；`会更好吗？为了便于访问，我至少会在锚定标记中包含一个
title
属性。这涵盖了更多内容。可能使用
width:100%和``高度：100%；`会更好吗？