自定义启动页面上奇怪的浮动/宽度问题(动态调整大小)(.

Question

我正在为我的朋友制作这个启动页面，可以在这里找到：

http://seekoften.com/EDMfact/

我想让每个社交媒体图标成为一个链接，悬停时有一个框阴影缓和。我了解到，由于我需要将锚标签显示为块以使轻松效果影响整个社交媒体图像，但是通过使它们显示块而不是内联，我现在在尝试水平布局它们时会遇到问题。

您会注意到所使用的全尺寸图像的宽度（500px x 500px）迫使li具有该宽度，从而迫使所有内容都下降到下一行。

我希望有人可以帮助我在同一行上获得所有社交图标，并根据视口的宽度动态调整大小。

另外，如果可能的话，我希望有人可以帮助指导我如何使标题图像（EDMfact和Ravergirls）无法复制，拖放等。我尝试将它们制作为该div 的背景图像，但很难动态地强制它成为适当的高度。

提前感谢，希望你们能帮我理顺！我已经为此工作了几个小时，并且对如何规范这一点感到完全不知所措，任何帮助和建议将不胜感激。

Answer 1

首先，您不应该使用 500px x 500px 的图像将它们显示为 32px x 32px（或类似大小）......这将为访问者生成带宽并导致性能问题。

在您设置的 4 张图像上：宽度="10%"请将其替换为：style="宽度：32px"

然后在文件中：样式.css，第 110 行左右您将拥有：显示：块;将其更改为：显示：内联;

Answer 2

这个答案只对你有用...无论如何，您需要纠正的是：

.social ul {
    display: block;
}
.social ul li {
    display: inline;
    /* float: left; <---REMOVE */
}
.social ul li a {
    display: inline;
    /* display: block; <---REMOVE */
    /* float: left; <---REMOVE */
}

这仍然不会修复阴影，因此将阴影移动到 img 标签：

.social ul li a:hover img {
    box-shadow: 0 0 3px #f7f731;
}