li 自适应，栏目分割（负margin，兼容所有浏览器）

heyun51

于 2010-01-14 12:28:32 发布

阅读量106

点赞数

分类专栏： yui（html-css）文章标签：浏览器 IE XHTML CSS HTML

本文链接：https://blog.csdn.net/heyun51/article/details/83529379

版权

yui（html-css）专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>栏目测试-玩</title>
<style type="text/css">
#menu ul {
	overflow: hidden; /* 重要 隐藏撑出范围内的物品*/
	padding: 0; /* 重要 默认是有值的*/
	font: 12px/20px '宋体', 'Arial', 'Verdana', 'Helvetica', sans-serif;
	zoom: 1; /* 重要，兼容 ie6 激活IE里面的layout,也自适应背景缩放*/
}

#menu li {
	float: left;
	padding: 3px;
	height: 20px;
	line-height: 20px;
	margin-left: -2px; /* 重要 由于下面图片有2像素，特意加上-2使得它向左移出，然而就可以被隐藏了*/
	background: #ccc url(images/03.gif) no-repeat left 50%;
	text-align: center;
	margin-top: 5px;
	list-style: none;
}

#menu li a {
	display: block;  /* 重要 块面*/
	white-space: nowrap; /* 重要，兼容 ie 文字不能换行*/
	margin: 0 5px;
	text-decoration: none;
}

#menu li a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div id="menu">
	<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
</body>
</html>

heyun51

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
li 自适应，栏目分割（负margin，兼容所有浏览器）

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;
复制链接

扫一扫

专栏目录