菜单分隔线不显示
慕粉0928522411
2017-03-16 12:07
帮我看下是哪里出错了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.foot{height: 100px;}
a{color: #0000FF;text-decoration: none;}/*取消a的下划线*/
.nav li{list-style:none;float:left;font-size: 16px;margin: 10px 10px ;}
.nav ul{width: 600px;margin: 0 auto;}/*设置ul块自动居中*/
/*菜单选项间的分隔线 为什么不起作用？*/
.nav li:after{content: "";
position: absolute;
right: 0;
top: 10px;
height: 5px;
width: 1px;
background: linear-gradient(to bottom,#f82f87,#B0363F,#f82f87);}
.nav li:last-child:after{width:0px; height:0px;}
</style>
</head>
<body>
<div class="foot">
<div class="nav">
<ul>
<li><a href="">关于昵图</a></li>
<li><a href="">网站公约</a></li>
<li><a href="">网站声明</a></li>
<li><a href="">帮助中心</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">常见问题</a></li>
<li><a href="">网站地图</a></li>
</ul>
</div>
</div>
</body>
</html>
2回答
-
- 慕运维5178013
- 2017-03-18 13:40:58
你没有写相对定位，.nav li{position:relative;}
-
- 慕粉4011436
- 2017-03-16 16:15:35
.nav li{ background: linear-gradient(to bottom,#f82f87,#B0363F,#f82f87) no-repeat right / 1px 15px;}
你试下行不行
十天精通CSS3
242554 学习 · 2623 问题
相似问题