gpt4 book ai didi

html - CSS 样式不适用

转载 作者:行者123 更新时间:2023-11-28 08:07:38 26 4
gpt4 key购买 nike

我正在尝试运行这个简单的代码,但似乎 css 中的某些声明没有生效(主要是文本和图像的居中并排放置,没有元素符号)。

当我使用 StackOverflow 的代码片段工具运行代码时,样式似乎适用。但是当我在 Chrome、IE 和 Firefox 中运行代码时,样式变为 <ul>文本似乎不起作用。

#smedia-container {
position:relative;
max-width: 302px;
max-height: 110px;
text-align: center;
}
.smedia-header {
background-color: #b90021;
color: #fff;
min-height: 32px;

}
.smedia-icons li {
float: left;
display: inline;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>social media bar</title>
<link rel="stylesheet" type="text/css" href="smedia-bar.css">
</head>
<body>
<div id="smedia-container">
<div class="smedia-header">
Social Media
</div>
<p> Follow Us </p>
<ul class="smedia-icons">
<li><a href="https://www.instragram.com"><img src="instragram.png" alt=" "> </a> </li>
<li><a href="https://www.facebook.com"><img src="facebook.png" alt=" "></a></li>
<li><a href="https://www.twitter.com"><img src="twitter.png" alt=" "></a></li>
<li><a href="https://www.flicker.com"><img src="flicker.png" alt=" "></a></li>
<li><a href="https://www.youtube.com.com"><img src="youtube.png" alt=" "></a></li>
<li><a href="https://www.tumblr.com"><img src="tumbler.png" alt=" "></a></li>
</ul>
</div>
</body>
</html>

我使用在线验证器验证了 html 和 css,结果都有效。

在清除缓存、更新文本编辑器 (sublime3)、重新启动计算机、删除与 ul.smedia-icons li 元素关联的所有样式、保存文档并在代码中重新插入样式后等待一段时间,似乎现在工作正常。甚至以文本为中心的样式现在似乎也可以使用。它甚至可以跨多个浏览器工作,所以我认为它可能是我的文本编辑器或计算机系统中的错误。很高兴知道我的语法和逻辑是正确的。感谢所有帮助我度过难关的人!

最佳答案

如果它在代码段中正常工作,而不是在您的桌面上正常工作,则问题很可能是您对 CSS 文件的链接引用。使用您向我们展示的代码,css 文件必须与您的 html 文件位于同一目录中。它们不能位于单独的文件夹中。

作为旁注,您需要更新所有外部链接,以便在它们前面也包含“http://”。否则所有链接都不会真正起作用。

例如<a href="www.instragram.com">实际上应该是

<a href="http://www.instragram.com">

关于html - CSS 样式不适用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29420851/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com