`
buliangniu
  • 浏览: 92230 次
  • 性别: 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` 自动调整高度以...

    jquery 折叠ul li

    接下来,我们将详细探讨如何利用jQuery来控制`ul`元素下的`li`标签中的嵌套`ul li`列表,实现其折叠和展开的功能。 #### 基本原理 在上述代码片段中,主要实现了通过点击`&lt;li&gt;`元素中的`&lt;a&gt;`标签来触发其后跟随的`...

    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 li 模拟省市区下拉框

    在网页开发中,为了提供更好的用户体验,我们常常需要模拟出具有层级关系的...以上就是“ul li 模拟省市区下拉框”的相关知识点,它涉及到前端UI设计、数据处理、事件驱动编程等多个方面,是网页开发中的一个重要技能。

    div+css+ul-li制作横向导航栏

    首先,我们需要创建一个`&lt;div&gt;`作为导航栏容器,然后在其中嵌套一个`&lt;ul&gt;`标签,`&lt;ul&gt;`中包含多个`&lt;li&gt;`标签,每个`&lt;li&gt;`代表一个导航链接: ```html &lt;div id="navbar"&gt; &lt;ul&gt; &lt;li&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;关于我们...

    div制作的弹出菜单

    此结构清晰地展示了主菜单项(`&lt;li&gt;`)、子菜单项(嵌套的`&lt;li&gt;`)以及三级菜单项(再次嵌套的`&lt;li&gt;`)。通过这种分层结构,可以轻松扩展更多级别的菜单。 #### 三、CSS样式设计 接下来是CSS部分,这部分主要负责...

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

    按照HTML规范,`&lt;div&gt;`不应该直接嵌套在`&lt;ul&gt;`内部,因为这违背了`&lt;ul&gt;`的语义,即它应该只包含`&lt;li&gt;`元素。 在上述示例中,我们看到一个`&lt;ul&gt;`列表,其中包含五个`&lt;li&gt;`元素,然后紧接着是一个`&lt;div&gt;`元素。在IE7...

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

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

    CSS+div下拉菜单(js).pdf

    如果某个菜单项有子菜单,那么子菜单将作为另一个`&lt;ul&gt;`嵌套在该`&lt;li&gt;`中。 关键点在于,下拉菜单的子菜单必须嵌套在父级`&lt;li&gt;`中,以便可以通过CSS进行精确的定位和显示控制。例如: ```html &lt;div id="nav"&gt; &lt;ul...

    UL里的LI元素左浮动层一行显示时使其居中的方法

    - 首先对div、ul和li标签进行样式重置,移除了默认的margin、padding和border属性,以保证布局不受这些默认属性的干扰。 - 设置了body的字体、颜色、文本对齐方式等基本样式,并且为页面定义了关键词和描述。 - 为....

    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...

    一款三级弹出CSS导航菜单

    - 二级菜单和三级菜单嵌套在一级菜单项的`&lt;ul&gt;`标签内,并通过CSS控制其显示和隐藏。 2. **CSS样式** - **基础样式**:设置`&lt;ul&gt;`和`&lt;li&gt;`的基本样式,包括清除默认的列表样式、设置浮动等。 - **鼠标悬停效果**...

    jQuery在ul中显示某个li索引号的方法

    文章中提到的这种方法不仅仅适用于ul和li元素,还适用于其他具有包含关系的DOM元素,例如div、span等。对于有嵌套结构的元素,要获取特定元素的索引,可能需要结合使用`parent()`、`children()`、`find()`等方法来...

    同一页面多个Tab选项卡嵌套显示实例

    1. HTML基础:Tab选项卡的基本结构通常由HTML的`&lt;div&gt;`、`&lt;ul&gt;`和`&lt;li&gt;`等标签构建。每个Tab是一个`&lt;li&gt;`元素,而`&lt;div&gt;`用于承载对应的Tab内容。 2. CSS美化:通过CSS来定义Tab的样式,包括字体、颜色、边框、背景...

    多级嵌套选项卡_多级嵌套舌签Tabs

    例如,可以使用`&lt;ul&gt;`和`&lt;li&gt;`元素来构建选项卡,使用`&lt;div&gt;`元素包裹内容区域,通过类名区分不同层级。 兼容性是此类组件的另一个重要方面。此项目特别提到在IE6+、Firefox2+、Opera9等浏览器中都能正常工作,这...

    css+div+js侧栏

    在这个例子中,我们使用了`&lt;div&gt;`标签来定义侧栏区域,并嵌套使用多个`&lt;ul&gt;`和`&lt;li&gt;`元素来组织侧栏的各个层级。 ```html &lt;div id="nav"&gt; &lt;ul&gt; &lt;li&gt; 一级目录1 &lt;ul class="collapsed"&gt; &lt;li&gt;二级目录1-1&lt;/a&gt;&lt;/...

    DIV+CSS打造PHP168经典模板.doc

    通过使用多个嵌套的DIV来划分这些区域,并结合CSS进行定位和样式设计。 - **结构示例**:采用三列布局(左侧+中间+右侧),以及中间的两列布局(左侧+中间)。通过设置不同DIV的类名来区分各个部分,例如: - `div...

    简单的div+css模板适合新手

    - 页面通过多个嵌套的`&lt;div&gt;`标签划分区域,包括页头、内容区、侧边栏和页脚。 - 使用了无序列表`&lt;ul&gt;`来组织导航菜单项。 #### 二、CSS样式解析 此模板采用了内部样式表和外部样式表相结合的方式。 ##### 1. ...

Global site tag (gtag.js) - Google Analytics