Question

我正在开展一个学校项目，所以我仍然在学习如何编码，但是我在使用ul工作链接时遇到了问题。此页面上的导航和其他链接工作正常，但这个不起作用。任何帮助，将不胜感激。这是我的编码页面和示例的链接。 http://www.nesbittclan.com/beatrice/treatments.html

<div id="sidebar">
<ul>
<h1>Products</h1>
<li><a href="hair.html">Hair</a></li>
<li><a href="nails.html">Nails</a></li>
<li><a href="makeup.html">Makeup</a></li>
<li><a href="body.html">Body</a></li>
<h1>Treatments</h1>
<li><a href="massage.html">Massage</a></li>
<li><a href="nails.html">Nails</a></li>
<li><a href="makeup.html">Makeup</a></li>
<li><a href="laser.html">Laser Hair Removal/ Electrolysis</a></li>
<li><a href="facials.html">Facials</a></li>
<li><a href="packages.html">Packages</a></li>
<li><a href="special.html">Special Events</a></li>
</ul>
</div>

Answer 1

首先在某处移动h1代码，它们不能是UL元素的直接子代。

但真正的问题实际上不是a标签，而是<span>标头标记下#treatments h1的奇怪样式：

#treatments h1 span {
    background-repeat: no-repeat;
    background-image: url(../images/treatmenttitle.png);
    position: absolute;
    width: 100%;
    height: 100%;
}

由于h1是静态定位的，因此span标记位于绝对位置，覆盖部分网页，包括a标记。

要解决此问题，您可以将span相对于父h1定位：

#treatments h1 {
    position: relative;
}

或完全删除span，不确定是否需要它。

无法获得在ul上工作的链接，其他页面上的工作正常

1 个答案: