`
xiao
  • 浏览: 166121 次
  • 性别: 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关键字文章 ...
评论
发表评论

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

相关推荐

    简单兼容各种浏览器的下拉菜单导航

    在网页设计中，创建一个兼容各种浏览器的下拉菜单导航是一项基本且重要的任务。这个"简单兼容各种浏览器的下拉菜单导航"项目采用CSS（层叠样式表）、HTML（超文本标记语言）以及jQuery（一个轻量级的JavaScript库）...

    兼容所有浏览器的JQ下拉菜单

    在IT行业中，创建一个兼容所有浏览器的用户界面是至关重要的，因为不同的用户可能使用不同的浏览器进行浏览。本项目提供了一个基于jQuery的下拉菜单解决方案，它特别强调了跨浏览器兼容性，确保在主流浏览器（如...

    jquery 100%自适应左右切换焦点图，兼容IE 6789及其它主流浏览器

    本教程将详细介绍如何使用jQuery实现一个100%自适应、兼容IE 6789及其他主流浏览器的左右切换焦点图。 ### 1. jQuery 基础知识 jQuery 是一个广泛使用的 JavaScript 库，它简化了JavaScript的DOM操作、事件处理和...

    li 自适应宽度

    3. `#nav ul li a`: 这里定义了`&lt;li&gt;`内的链接`&lt;a&gt;`的样式，包括内边距、颜色、背景色、文字装饰等，并通过负外边距实现了链接间的间距。 通过这种方式，`&lt;li&gt;`元素会根据其内部`&lt;a&gt;`元素的内容自动调整宽度。当...

    js树形菜单,完全兼容

    在“js树形菜单,完全兼容”这个主题中，我们关注的是这种菜单在各种浏览器下的兼容性问题，特别是对于老旧版本的Internet Explorer（如IE5、IE6、IE7、IE8）以及Firefox 1.5+和Chrome等主流浏览器。 实现JavaScript...

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

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

    通杀所有浏览器兼容问题

    本文将根据提供的文件信息，深入探讨和总结“通杀所有浏览器兼容问题”的关键知识点，主要围绕div、css以及浏览器兼容性的常见问题与解决方案展开。 ### 一、基础知识重置 #### 1. CSS Reset 为了解决浏览器默认...

    浏览器兼容性汇总

    **解决方案**: 在所有浏览器中统一使用 `var` 关键字定义常量，避免兼容性问题。 ##### 3. event.x与event.y问题 - **IE**: 提供 `event.x` 和 `event.y` 属性，但无 `pageX` 和 `pageY`。 - **Firefox**: 提供 `...

    兼容任何浏览器的导航固定

    ### 兼容任何浏览器的导航固定 在网页设计与开发领域中，实现导航栏的固定效果是一项常见的需求。本文将详细介绍如何通过CSS技术实现在不同浏览器下都能稳定工作的导航固定效果，确保用户无论使用何种浏览器访问...

    浏览器兼容性问题1

    2. **负margin问题**：IE6使用负margin可以使元素移出父级，但移出的部分会被父级裁剪，这可能导致预期的布局效果无法达成。 3. **边框bug**：例如，1px的点线边框在IE6中可能会显示为虚线，以及背景延伸至边框区域...

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

    本知识点将探讨如何使用隐藏和负边距技巧来实现一个在所有主流浏览器中均兼容的ul（无序列表）和li（列表项）并列布局效果。 在该技术中，我们主要关注的CSS属性有： 1. display: inline; 和 display: inline-...

    开源Tree树状菜单HTML+Javascript兼容各浏览器

    开发者可能使用了像jQuery这样的库来简化跨浏览器的兼容性工作，或者采用polyfill技术为不支持某些特性的老版本浏览器提供替代实现。例如，Internet Explorer在某些版本中对CSS3选择器和事件处理的支持较弱，开发者...

    兼容各种浏览器的js选项卡特效

    5. **浏览器兼容性**：为了确保在各种浏览器上都能正常工作，需要考虑JavaScript的兼容性和CSS3特性的支持。例如，可以使用`feature detection`（特性检测）库如Modernizr来判断浏览器是否支持某些特性，如果不支持...

    jquery 无缝滚动 demo

    确保使用的jQuery版本与目标浏览器相兼容，同时避免使用只有某些浏览器支持的特定功能。 五、优化与拓展 1. 添加箭头控制：可以为用户添加向前和向后箭头，通过点击控制滚动方向。 2. 自适应布局：考虑响应式设计...

    自适应宽度的标签导航

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

    兼容主流浏览器的jQuery多级手风琴菜单

    本教程将详细讲解如何利用jQuery实现一个兼容主流浏览器的多级手风琴菜单。 首先，我们需要理解“手风琴菜单”的概念。手风琴菜单是一种用户界面元素，它允许在一个有限的空间内展示多个层次的内容。每个菜单项可以...

    jquery实现带按钮的轮播效果-兼容所有主流浏览器

    本教程将介绍如何使用jQuery来实现一个兼容所有主流浏览器的带按钮的轮播效果。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在创建轮播效果时，jQuery的...

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

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

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