`
buliangniu
  • 浏览: 90027 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

div ul li 的嵌套顺序

阅读更多

      就是<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高度自适应问题

    div ul li 嵌套的使用在网页布局中很常见,最主要的问题就是如何解决增加多个li后DIV高度自动适应问题,本文有个不错的示例,可以解决此问题,大家可以尝试运行下

    HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单

    复制代码代码如下: HTML网页如下:(通过嵌套的&lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;)(兼容IE6-9,... &lt;div id=”menu”&gt; &lt;ul&gt; &lt;li&gt;相关法规&lt;/a&gt; &lt;ul id=”rule”&gt; &lt;li&gt;&lt;a&gt;Adobe Reader&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;Foxit Reader&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;

    ul里不能直接嵌套div(在ie7以前版本)

    在ul下,直接嵌套div,在ie7以前版本,会出现的状况是:div会被离它最近的li包裹住。 请看dome 复制代码代码如下: &lt;ul class=”clearfix”&gt; &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&gt;3&lt;/li&gt; &lt;li&gt;4&lt;/li&gt; &lt;li&gt;5&lt;/li&gt; &lt;div class=”...

    Div 制作的SELECT

    // 替换 第 i 个 SELECT 中所有Option 为Ul嵌套LI元素 replaceOptions(i,selects[i].name); mouseSelects(selects[i].name); if (isIE){ selects[i].onclick = new Function("clickLabels3('"+selects...

    纯DIV+CSS网页示例

    而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。 12.另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用...

    精易模块---用于网页操作及其它功能的易语言模块

    ULLI_取引用代码 说明:取【ULLI】的引用代码,失败返回空文本 ULLI_选择 说明:选择指定的【ULLI】项,失败返回假 表格_取单元格数量 说明:取出指定【表格】内的所有单元格数量,失败返回0 表格_取单元格文本 ...

    flat-html:编写未嵌套的html

    您编写了一系列有关每个元素应设置为什么的语句。 如{ "data": [ "-h1 =My post", "^ul li = I am list item 1", "ul li = I am list item 2", "ul li = ... &lt;div&gt; &lt;h1&gt;My post&lt;/h1&gt; &lt;ul&gt; &lt;li&gt; I am list item 1&lt;/li&gt;

    html标签的嵌套规则介绍

    XHTML的标签有许多:div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套也需要有一定规则,不能任由自己的个人习惯胡乱...

    JavaScript实现多层颜色选项卡嵌套

    本文实例为大家分享了JavaScript实现多层颜色选项卡嵌套的具体代码,供大家参考,具体内容如下 这是学JavaScript时候的一个作业,如果没有思路还是挺有难度的,但是思路正确的话一步一步来就很简单做出来了。 实现...

    HTML标签嵌套规则详细归纳适合新手朋友

    XHTML的标签有许多:div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套也需要有一定规则,不能任由自己的个人习惯胡乱...

    XHTML标签的嵌套规则分析

    XHTML 的标签有许多:div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套也需要有一定规则,不能任由自己的个人习惯...

    Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

    Nuxt嵌套路由官网上的API详解:... &lt;div&gt; 父组件的页面的内容 &lt;ul&gt; &lt;!-- 进行切换子页面,写法同vue.js --&gt; &lt;li&gt;&lt;nuxt to='/parent/child'&gt;child&lt;/nuxt&gt;&lt;/li&gt; &lt;li&gt;&lt;nuxt to='/parent/child2'&gt;child2&lt;/nux

    jquery实现具有嵌套功能的选项卡

    通常情况下,大家见到的选项卡都是没有嵌套功能的,也就是说就是完成了一层切换效果,本章节分享一段代码实例,实现了选项卡的...body, ul, li, div, a{ margin:0px; padding:0px; } body{ margin-top:10px; mar

    基于Jquery代码实现手风琴菜单

    &lt;div id=menuDiv&gt;  &lt;ul id=menu&gt;  &lt;li class=parentLi&gt;  &lt;span&gt;B  &lt;ul class=childrenUl&gt;  &lt;li class=childrenLi&gt;&lt;span&gt;C&lt;/span&gt;&lt;/li&gt;  &lt;li class=childrenLi&gt;&lt;span&gt;C&lt;/span&gt;&lt;/li&gt;  &lt;li class=childrenLi&gt;...

    淘宝图片轮播展示上下变换效果代码

    86206975.jpg" border=0&gt;&lt;/A&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/DIV&gt; 注意:此模式图片宽度不能小于750像素,否则留白很大。代码中蓝色部分为图片地址,可以替换自己制作的存放在图片空间中的轮播图。红色部分为图片所...

    HTML:超文本标题语言

    &lt;/ul&gt; 只能嵌套&lt;li&gt;标签,&lt;li&gt;标签可以容纳所有元素 &lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt; ... &lt;/ol&gt; 用于有序的排列 &lt;dt&gt;... &lt;dd&gt;... &lt;dd&gt;... &lt;dd&gt;... ... &lt;/dl&gt; 是自定义列表,解释 &lt;table&gt; 表格 &lt;tr&gt; ...

    jQuery选择器上机练习题及答案.rar

    (12)选择div元素内嵌套的span元素 上机任务2 用chrome打开dom.sample2.html页面, 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (13)选择元素li,该元素作为拥有myList类的ul元素的...

    div+css有实例,易学易懂

    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 制作菜单内容和结构...

Global site tag (gtag.js) - Google Analytics