Question

我一直面临着一个大问题。我不知道为什么我无法解决这个问题。问题是我为我的网站做了一个页脚，并添加了一些li元素和社交媒体图标..但它不起作用。请帮助。

screenshot

这里的li元素“关于”，“媒体”，“反馈”，“隐私政策”都不起作用。 4个社交媒体图标也无法正常工作。这是我的html和css代码如下： -

footer
{
width: 100%;
background-color: #2d2d2d;
padding: 20px 0px;
	height: 150px;
}
footer h2 {
    font-size: 16px;
    color: #a1a1a1;
    text-transform: uppercase;
	margin-top: 10px;
    margin-bottom: 40px;
	margin-left: 20px;
	

	
}
h2 {
    font-size: 20px;
	font-family: 'Gothic-Bold';
    font-weight: normal;
	position:sticky;
	margin-bottom: 40px;
	padding-top: 20px;
}


* {
    padding: 0px;
    margin: 0px;
}

.ft-quick-links
{
	float:left;
	width:400px;
}
.ft-quick-links ul li{
	float:left;
	margin-right:6px;
	margin-bottom:20px;
	margin-left: 5px;
	list-style: none;
	padding-right: 5px;
	padding-top: 20px;
	
	
}
.ft-quick-links li a{
	padding: 8px 15px;
	font-size: 13px;
	color: #959595;
	background:#202020 ;
	text-decoration: none;
	margin-bottom: 30px;
}
.ft-quick-links li a:hover{
	background:#171717;
}
.footer-btm-wrapp{
	width:100%;
	display:table;
	background:#1b1b1b;
}
.ft-btm-left {
	float:left;
}
.ft-btm-left ul li{
	float:left;
	margin-right:40px;
}
.ft-btm-left ul li a{
	font-size:12px;
	color:#5f5f5f;
}
.ft-btm-left ul li a:hover{
	text-decoration:none;
}
.footer-btm-wrapp .wrapper{
	padding:20px 0px;
}
.ft-social ul li{
	float: right;
	padding-right: 20px;
	padding-top: 100px;
	list-style: none;

	 
}
.footer-btm-wrapp .wrapper{
	padding:8px 0px;
	list-style: none;
}


.copy-rights p{
	color:#959595;
	font-size:13px;
	list-style: none;
	margin-top: -40px;
	padding: 60px 20px 10px;
	float:right 10px;
	text-align:right;
	list-style: none;
	
	
	
}
.wrapper{
	width:1100px;
	margin:0px auto;
	position:relative;
}

.ft-lines{
    font-size: 12px;
    margin-top: 110px; 
    
}

.ft-lines li {
    list-style: none; 
    display: inline; 
    margin: 0 10px 0 10px;
}

.ft-lines a {
    text-decoration: none;
    color: #959595;
}

.ft-lines a:hover {
    text-decoration: underline;
}

<!DOCTYPE html>
<html>
<body>
	<link rel="stylesheet"type="text/css" href="footer.css">
<footer>
	
	<div class="wrapper">
	<div class="ft-quick-links">
		<h2>Quick Links</h2>
		<ul class="clearfix">
			<li><a href="#">About</a></li>
			<li><a href="#">Media</a></li>
			<li><a href="#">Feedback</a></li>
			<li><a href="#">Privacy policy</a></li>
			</ul>
		</div>
	</div>
		<div class="wrapper">
		<div class="ft-social">
    		<ul class="clearfix">		
     		
			
			<li><a href="http://www.youtube.com"><img src="images/yt.png"/></a></li>
			<li><a href="http://www.instagram.com"><img src="images/ig.png"/></a></li>
			<li><a href="http://www.twitter.com"><img src="images/twit.png" /></a></li>
			<li><a href="http://www.facebook.com"><img src="images/fb.png" /></a></li>
	
			</ul>
		</div>
		</div>
			<div class="wrapper">
			<div class="ft-lines">
			<ul class="clearfix">
				<li><a href="#">Terms of Use</a></li>
				<li><a href="#">Content Guidelines</a></li>
				<li><a href="#">Report error </a></li>
				</ul>	
				<div class="copy-rights"><p> ©  2017 Rodeo labs. All rights reserved</p>
			</div>
	</div>
	</div>
	</footer>
	
	</body>
</html>

Answer 1

你在包装类中使用相对位置有什么特别的原因吗？您还将包装类的宽度设置为1100px，这可能不正确。我在你的包装器类中更改了CSS，输出似乎就像你想要的那样。

.wrapper{
    width: 100%;
    margin:0px auto;
}

如您所见，我删除了位置：relative并将宽度更改为100％。此外，您已在body标记内包含CSS导入标记。它应该在head标签内。希望这能帮到你。

李ahref，社交媒体图标不起作用

1 个答案: