css - 自定义初始页面上的奇怪 float /宽度问题(动态调整大小)(

标签 css block inline

我正在为我的 friend 制作这个启动页面,可以在这里找到:

http://seekoften.com/EDMfact/

我想让每个社交媒体图标都成为一个链接,悬停时带有框阴影缓入效果。我了解到,由于我需要将 anchor 标记显示为 block 以使缓动效果影响整个社交媒体图像,但是通过使它们显示 block 而不是内联,我现在在尝试放置它们时遇到了问题水平向外。

您会注意到使用的全尺寸图像的宽度(500 像素 x 500 像素)迫使 li 具有该宽度,从而迫使所有内容向下一行。

我希望有人能帮助我将所有社交图标放在同一行上,并根据视口(viewport)的宽度动态调整大小。

此外,如果可能的话,我希望有人可以帮助指导我如何使标题图像(EDMfact 和 Ravergirls)无法复制、拖放等。我已经尝试将它们作为背景图像div,但很难动态地将其强制设置为适当的高度。

在此先感谢,我希望你们能帮我解决这个问题!我已经为此工作了几个小时,完全不知道如何调节它,我们将不胜感激任何帮助和建议。

最佳答案

首先,您不应该使用 500px x 500px 的图像将它们显示为 32px x 32px(或类似尺寸)...这会为访问者产生带宽并导致性能问题。

在你设置的4张图片上:width="10%" 请将其替换为:style="width:32px"

然后在文件:style.css 中,大约第 110 行 你将会拥有: 显示: block ; 将其更改为: 显示:内联;

关于css - 自定义初始页面上的奇怪 float /宽度问题(动态调整大小)(,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27135410/

相关文章:

html - 一些 CSS 问题

css - 跨浏览器定位问题 zoom - div 和 table(?)

css - 如何使 Shiny 应用程序中的图像宽度动态化?

c - 一次引用的静态函数的优化

css - float 旁边的内联元素

css - IIS 上的网站与 Apache 上的网站不同

c# - 在 C# 中阻止传出连接(IP 地址)

请 CSS 帮助,2 个对象拒绝留在同一行

javascript - 将 METRONIC 添加到 Django 项目

CSS 两个 div 宽度 50% 在一行中,文件中有换行符