Question

我试图运行这个简单的代码，但似乎css中的某些声明没有生效（主要是文本和图像的中心并排放置没有子弹）。

当我使用StackOverflow的代码片段工具运行代码时，样式似乎适用。但是当我在Chrome，IE和Firefox中运行代码时，<ul>和文本的样式似乎无法正常工作。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

我使用在线验证器验证了html和css，两者都恢复有效。

清理缓存后等待一段时间，更新我的文本编辑器（sublime3）重新启动计算机，删除与ul.smedia-icons li元素关联的所有样式，保存文档并在代码中重新插入样式，似乎现在工作正常。甚至以文本为中心的风格似乎现在都有效。它甚至适用于多个浏览器，因此我认为它可能是我的文本编辑器或计算机系统中的错误。很高兴知道我的语法和逻辑是正确的。感谢所有帮助我完成此任务的人！

Answer 1

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

作为旁注，您需要更新所有外部链接以包含＆＃34; http：//＆＃34;在他们面前。否则，这些链接都不会真正起作用。

e.g。 <a href="www.instragram.com">实际应该是

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

Answer 2

我不知道，但我认为text-decoration: underline不起作用，请尝试添加

.smedia-icons li a {
    text-decoration: none;
}

CSS样式不适用

2 个答案: