html - 使自定义元素符号图像成为可点击链接的一部分

Question

我正在尝试使用自定义元素符号图像在 CSS 中编写水平导航菜单。

我可以让大多数东西正常工作，但问题是自定义元素符号图像(每个导航项都不同)不是可点击链接的一部分。

我知道我可以将 A 标签移到 LI 标签之外，但这是糟糕的编码习惯。

有谁知道如何使自定义元素符号图像成为可点击链接的一部分？我的直觉是确保 display:block，但它会弄乱水平布局。

这是我到目前为止所得到的:

CSS:

#navlist {
    list-style: none;
    margin: 0;
    padding: 20px 0 0px 20px;
}

#navlist ul {
    margin: 0;
    padding: 0;
}

#navlist li {
    display:inline;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 35px;
    margin: 0 20px 0 .4em;
}

#navlist li a {
    text-decoration:none;
}

#navlist li.contact {
    background-image: url(img/contact.png);
}

#navlist li.about {
    background-image: url(img/about.png);
}

HTML:

<ul id="navlist">
    <li class="contact"><a href="#">Contact Us</a></li>
    <li class="about"><a href="#">About Us</a></li>
</ul>

Answer 1

我假设您的自定义元素符号是应用于 #navlist li.contact 和 #navlist li.about 的背景图片。

我的建议是从你的 li 中删除填充并将填充添加到你的 a。这将强制用于查看元素符号的间距位于您的 a 标记内并且“可点击”。