`
xiao
  • 浏览: 161533 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

浏览器IEXHTMLCSSHTML
阅读更多 
<!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>

 

0
顶
0
踩
分享到：
| 教你如何通过SQL方式 调用TAG关键字文章 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    文字列表拖动排序兼容各种浏览器

    jquery 文字列表拖动排序兼容各种浏览器,可改成图片列表排序。只需在li中写上标签即可。

    自适应宽度的标签导航

    href="javascript:void(0)"&gt;自适应宽度的标签&lt;/A&gt; &lt;/LI&gt; 第一个标签的内容 第二个标签的内容 第三个标签的内容&lt;/DIV&gt;&lt;/DIV&gt; function selectTag(showContent,selfObj){ // 操作标签 var tag = document....

    原生JS无限级树形菜单（兼容各浏览器）

    原生JS写的无限级树形菜单(包含文件：otree.js,otree.css,demo.html,demo1.html,imgs/ )，兼容IE6/7/8/9+、Chrome、Firefox、Opera、Safari等主流浏览器，以及360/搜狗等其他各浏览器。 可动态添加/删除节点，启用/...

    li 自适应宽度

    [html] &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;...

    巧用隐藏和负边距实现兼容所有浏览器的ul和li并列效果

    最终效果图如下： （我写两个ul的原因是li只有一排和多排效果会不...margin-right:auto}li{float:left;display:inline;width:100px;height:100px;line-height:100px;text-align:center;margin:0 5px 10px;background:

    46种常见的浏览器兼容性问题大汇总

    2. const问题 3 3. event.x与event.y问题 3 4. window.location.href问题 3 5. frame问题 3 ...25. 属性选择器(这个不能算是兼容,是隐藏css的一个bug) 3 26. 为什么FF下文本无法撑开容器的高度 3

    原生JS树菜菜单(无限级、兼容各浏览器)

    原生JS写的无限级树形菜单(otree.js,otree.css,demo.html,demo1.html,imgs/ )，兼容IE6/7/8/9+、Chrome、Firefox、Opera、Safari等主流浏览器，以及360/搜狗等其他各浏览器。 可动态添加/删除节点，启用/不启用复选...

    CSS 控制字符宽度省略号效果 兼容浏览器

    兼容浏览器的CSS控制字符宽度省略号效果，是非常实用的，由于FF对溢出显示省略号的属性支持不好。因而在进行编码时，应用到了一个HACK和FF的私有属性，大家在学习时注意区别。 看下面的HTML代码： &lt;ul&gt; &lt;li&gt;使用CSS...

    li在ie/firefox浏览器中行高不一致解决方法(浏览器兼容)

    .tu_freeline_list li{text-indent:10px;font-size:0;height:30px;line-height:30px;overflow:hidden;zoom:1;}.tu_freeline_list li span{float:left;height:30px;overflow:hidden;width:155px;font-size:12px;}.tu_...

    多浏览器下IE6 IE7 firefox li 间距问题

    解决IE6 IE7 Firefox中li兼容问题

    css ul li 的使用及浏览器兼容问题

    大家都知道 ul 默认值中，IE 给了 ul 一个 margin 值，而 FF 给了一个 padding 值。

    jQuery自适应图片大小相册代码

    &lt;li style="background:url(images/img_1.jpg); width:856px; height:482px;"&gt;&lt;/li&gt; &lt;li style="background:url(images/img_2.jpg); width:904px; height:723px;"&gt;&lt;/li&gt; &lt;li style="background:url(images/img_3...

    html嵌入html，高度自适应，标签切换。

    html嵌入html，高度自适应，用li标签切换。 本源码基于pymJS，动态生成iframe标签。 源码仅供学习和参考！源码仅供学习和参考！！ 源码仅供学习和参考！！！重要的事说三遍。。

    浏览器兼容的垂直向上滚动效果

    浏览器兼容的垂直向上滚动效果，js实现，下载后在同一目录下建立一个文件名为images，向里面添加5张图片，图片名为1.jpg,2.jpg,3.jpg,4.jpg,5.jpg

    CSS 网页布局问题 li上多出的margin问题

    不知道大家知道这个问题不，在ie6的情况。假如ul中的li被设置了浮动，而ul本身有设置padding-top.你会发现li无端端多出了根ul的padding-top一样宽的margin-top(在浮动的li元素的数目已使分行的时候出现)。

Magicbox
Global site tag (gtag.js) - Google Analytics