滑动门

最新推荐文章于 2025-08-22 11:32:18 发布

ymrabbit1

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量355

点赞数

CC 4.0 BY-SA版权

文章标签： css html

本文链接：https://blog.youkuaiyun.com/ymrabbit1/article/details/47342827

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	ul{
		height:40px;
		background:grey;
	}
	li{
		float:left;
		line-height:40px;
		//border:1px red solid;
	}
	a,span{
		display:block;
	}
	a{
		//border:3px black solid;
		text-decoration:none;
	}
	span{
		//border:2px #8B0000 solid;
		padding:0 14px 0 0;
	}
	a:hover span{
		background:url(aaa.jpg) no-repeat right top;
	}
	#a1 a:hover{
		background:url(aaa.jpg) no-repeat left top;
		padding:0 0 0 14px;
	}

	
	
</style>
</head>
<body>
	
	<ul id="a1">
		<li><a href="#"><span>dasdf</span></a></li>
		<li><a href="#"><span>dasdfaaaa</span></a></li>
		<li><a href="#"><span>dasdfbbbbbbb</span></a></li>
		<li><a href="#"><span>dasdfddddddddddddddddd</span></a></li>
		<li><a href="#"><span>dasdfdddddddddddddddddddddddd</span></a></li>
		<li><a href="#"><span>dasdfaaaaaaaaaaa</span></a></li>
	</ul>
</body>
<script type="text/javascript">
	
</script>
</html>

注：

1、li里面放a，a里面放span，a和span背景图片一样，span的背景图片设置background-position为right top，那么a的背景图片会被span盖住，导致图片左侧边框可能会不出现，把span作为a的内容作padding-left移动，图片左边框就出现了；再在span里把文字内容做padding-right移动，那边文字就水平居中了；

2、li浮动后，宽度由内容大小决定，所以不用设置宽度；

3、设置单行文字垂直居中，设置a标签hover时导入背景图片。