Question

我在下面的CSS代码中遇到了一些问题。问题是只有一个图标可见（#maps），猜测定位有问题吗？（70％？）我找不到问题，希望有人在这里可以提供帮助。提前谢谢。

#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 10px;
left: 70%;
}

#navlist li, #navlist a {
    height: 64px;
    display: block;
}

#face{
left: 0px;
    width: 64px;
    height: 64px;
    background: url('.../imageurl') 0 0;
}

#maps{

    width: 64px;
    height: 64px;
    background: url('.../imageurl') 0  0;
}

Html代码：

<ul id="navlist">
  <li id="face"><a href="#"></a></li>
  <li id="maps"><a href="#"></a></li>
</ul>

Answer 1

确实存在#face的问题！虽然我不确定是否会再次显示它，因为我还需要你的HTML代码。你赋予它左边的属性：0px; （顺便说一句，如果它是0，你不需要写“px”）。但浏览器无法做任何事情，因为它不知道你正在使用哪种定位！属性left：0;如果你已经给它任何一个位置：绝对;或者位置：亲属;总而言之，我建议您阅读有关基本位置技术的更多信息，并上传HTML以便仔细查看。

编辑：发现问题。你认为#face有左边的属性：0;？你错了！因为#navlist li {left：70％}击败#face {left：0;}所以只需在#navlist li中删除该属性并将其添加到#maps！它会解决它！如果您想要阅读更多关于谷歌的信息，这是一个级联问题：CSS级联系统。

css定位 - 无法看出图标

1 个答案: