li href，社交媒体图标不起作用答案

【问题标题】：li ahref, social media icons doesnt workingli href，社交媒体图标不起作用
【发布时间】：2017-06-22 12:21:00
【问题描述】：

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

这里的 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>

【问题讨论】：

只需从 wrapper 类中删除 position:relative;。这是工作演示link。

标签： html css html-lists href footer

【解决方案1】：

您在包装类中使用相对位置是否有任何具体原因？此外，您将包装类的宽度设置为 1100px，这可能不正确。我更改了包装类中的 CSS，输出看起来就像你想要的那样。

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

如您所见，我删除了 position: relative 并将宽度更改为 100%。此外，您在 body 标记中包含了 CSS 导入标记。它应该在 head 标签内。希望这对您有所帮助。

【讨论】：