Question

我有一个带有包含li的ul的div（#socmed），我位于我页面的右上角。您可以在标头标签内找到div。顺便说一下，这些是社交媒体按钮。

正如你所看到的，它只出现在chrome和safari中（尚未在IE中测试过）。

我已经尝试过更改z-index，因为我感觉它被父div重叠，后者是粉红色的。但这似乎不起作用。我不知道该怎么做。

提前感谢您的帮助。

Answer 1

您可以进行2次CSS调整。首先制作一个相对容器（未在您的页面上进行全面测试，但通常是一个很好的做法...

header  {
position:relative;
}

其次，在标题中定义ul列表项的宽度......

#socmed ul {
width:30px;
}

希望这会有所帮助

Answer 2

在main.css:Line 73

中

为<li>项添加宽度。

#socmed li {
    list-style: none outside none;
    margin-top: 5px;
    width: 25px; /* Add this width..! */
}

这似乎可以解决您的问题。

您的外部#socmed div有width: 25px，但其中的<li>没有，默认情况下它比25px上的#socmed大{{1}} }，所以不会显示。

Answer 3

此问题与div#socmed：

的宽度有关

#socmed{
    width: auto;
    height: 125px;
    position: absolute;
    top:8px;
    right: 40px;
}

最初，您将宽度设置为25px，这不足以显示您的图标。

Answer 4

这个问题来自：

ul, ol {
  margin: 0 0 10px 25px; // to margin:0
  padding: 0;
}

请不要使用ul，ol这样的值margin: 0 0 10px 25px;这是一个全局。

Answer 5

我已将relative div放在relative容器中。它奏效了。