li 自适应，栏目分割（负margin，兼容所有浏览器）
<!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>
页:
[1]