就是<div><ul><li>的三角关系。我的经验就是<div>在最外面,里面 是<ul>,然后再是<li>,当然<li>里面又可以嵌套<div>什么的,但是并不建议你嵌套很多 东西。当你符合这样的规则的时候,那些倒霉的,不听话的间隙就不会在里面出现了,当你仅仅是<div>里面放<li>,而不 用<ul>的时候,你会发现你的间隙十分难控制,一般情况下,IE6和IE7会凭空多一些间距。但很多情况你来到下一行,间隙就没了,但是前 面的内容又空了很大一块,出现这种情况虽然你可以改变IE的Margin,然后调整Firefox下面的Padding,以便使得两者显示起来得效果很相 似,但是你得CSS将变得臭长无比,你不得不多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来兼容它们,但是你会烦得要命。
具体嵌套写法
遵循上面得嵌套方式,<div><ul><li></li></ul>< /div> 然后在CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style.:none;},其中list-style.:none是不 让<li>标记的最前方显示圆点或者数字等目录类型的标记,因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手 脚,你的IE6、和IE7、Firefox显示出来的东西(外距,间距,高度,宽度)就几乎没什么区别了,也许细心的你会在某一个时刻发现一、两个象素的 差别,但那已经很完美了,不需要你通过调整大片的CSS来控制它们的显示了,你愿意,你可以仅仅兼容一两个地方,而且通常这种兼容可以适应各种地方,不需 要你重复在不同的地方调试不同的兼容方式–减轻你的烦。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方,而统一兼容。尝试一下吧,再也不要乱嵌套了,虽然在Div+CSS的方式下你几乎可以想怎么嵌套 就怎么嵌套,但是按照上面的规律你将轻松很多,从而事半功倍!
分享到:
相关推荐
div ul li 嵌套的使用在网页布局中很常见,最主要的问题就是如何解决增加多个li后DIV高度自动适应问题,本文有个不错的示例,可以解决此问题,大家可以尝试运行下
复制代码代码如下: HTML网页如下:(通过嵌套的<ul><li></li></ul>)(兼容IE6-9,... <div id=”menu”> <ul> <li>相关法规</a> <ul id=”rule”> <li><a>Adobe Reader</a></li> <li><a>Foxit Reader</a></li> <li><
在ul下,直接嵌套div,在ie7以前版本,会出现的状况是:div会被离它最近的li包裹住。 请看dome 复制代码代码如下: <ul class=”clearfix”> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <div class=”...
// 替换 第 i 个 SELECT 中所有Option 为Ul嵌套LI元素 replaceOptions(i,selects[i].name); mouseSelects(selects[i].name); if (isIE){ selects[i].onclick = new Function("clickLabels3('"+selects...
而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。 12.另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用...
ULLI_取引用代码 说明:取【ULLI】的引用代码,失败返回空文本 ULLI_选择 说明:选择指定的【ULLI】项,失败返回假 表格_取单元格数量 说明:取出指定【表格】内的所有单元格数量,失败返回0 表格_取单元格文本 ...
您编写了一系列有关每个元素应设置为什么的语句。 如{ "data": [ "-h1 =My post", "^ul li = I am list item 1", "ul li = I am list item 2", "ul li = ... <div> <h1>My post</h1> <ul> <li> I am list item 1</li>
XHTML的标签有许多:div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套也需要有一定规则,不能任由自己的个人习惯胡乱...
本文实例为大家分享了JavaScript实现多层颜色选项卡嵌套的具体代码,供大家参考,具体内容如下 这是学JavaScript时候的一个作业,如果没有思路还是挺有难度的,但是思路正确的话一步一步来就很简单做出来了。 实现...
XHTML的标签有许多:div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套也需要有一定规则,不能任由自己的个人习惯胡乱...
XHTML 的标签有许多:div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套也需要有一定规则,不能任由自己的个人习惯...
Nuxt嵌套路由官网上的API详解:... <div> 父组件的页面的内容 <ul> <!-- 进行切换子页面,写法同vue.js --> <li><nuxt to='/parent/child'>child</nuxt></li> <li><nuxt to='/parent/child2'>child2</nux
通常情况下,大家见到的选项卡都是没有嵌套功能的,也就是说就是完成了一层切换效果,本章节分享一段代码实例,实现了选项卡的...body, ul, li, div, a{ margin:0px; padding:0px; } body{ margin-top:10px; mar
<div id=menuDiv> <ul id=menu> <li class=parentLi> <span>B <ul class=childrenUl> <li class=childrenLi><span>C</span></li> <li class=childrenLi><span>C</span></li> <li class=childrenLi>...
86206975.jpg" border=0></A></li></ul></DIV></DIV></DIV></DIV> 注意:此模式图片宽度不能小于750像素,否则留白很大。代码中蓝色部分为图片地址,可以替换自己制作的存放在图片空间中的轮播图。红色部分为图片所...
</ul> 只能嵌套<li>标签,<li>标签可以容纳所有元素 <li>...</li> <li>...</li> ... </ol> 用于有序的排列 <dt>... <dd>... <dd>... <dd>... ... </dl> 是自定义列表,解释 <table> 表格 <tr> ...
(12)选择div元素内嵌套的span元素 上机任务2 用chrome打开dom.sample2.html页面, 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (13)选择元素li,该元素作为拥有myList类的ul元素的...
5.9 关于ul 和li 的样式详解 5.9.1 使用list-style-type 属 5.9.2 使用list-style-position 属性 5.9.3 使用list-style-image 属性 5.9.4 list-style 属性 5.10 菜单原理 5.10.1 菜单原理 5.10.2 制作菜单内容和结构...