Question

我在我的朋友的这个启动页面上工作，可以在这里找到：

http://seekoften.com/EDMfact/

我希望将每个社交媒体图标都设为一个链接，并在悬停时添加框阴影。我已经了解到，因为我需要将锚标记显示为块以使缓动效果影响整个社交媒体图像，但是通过使它们显示块而不是内联，我现在在尝试时遇到问题把它们水平放置。

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

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

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

在此先感谢，我希望你们能帮助我理顺这一点！我已经在这个工作了几个小时，我完全失去了如何规范这个，任何帮助＆amp;建议将不胜感激。

Answer 1

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

.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;
}

Answer 2

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

在您设置的4张图片上：width =＆＃34; 10％＆＃34; 请将其替换为：style =＆＃34; width：32px＆＃34;

然后在文件：style.css中，在第110行附近你将会有：显示：块; 将其更改为： display：inline;

自定义初始页面上出现奇怪的浮动/宽度问题（动态调整大小）（

2 个答案: