`
hax
  • 浏览: 961390 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

关于list(ol和ul)的padding和margin

    博客分类:
  • CSS
阅读更多
在《CSS Mastery》一书的第5章中,作者说IE和Opera使用margin-left来缩进列表,而Safari和Firefox使用padding-left。经过我的实际测试,发现Opera 9(我实测的是Opera 9.23)同FF和Safari一样,也是使用padding-left的。更精确的说,它们的默认样式应该是:

ol, ul { padding-left:40px; }

而IE的默认样式是:

ol, ul { margin-left:30pt; }

Opera 8或者以前的版本是否和IE一样?有兴趣的同志可以自行测试。

但这至少说明一点,除了微软之外的浏览器厂商都达成一致意见,list的缩进应该使用padding来控制。其实这很好理解,缩进的是每一个item而不是整个的list。设计者对list有怎样的期望呢?比如说设置了ul的background:green,多数人应会期待整个ul(即包括了padding的部分)都使用绿色背景色,而不会希望在list的左侧缺失30pt(通常等于40px)。其次,marker部分(就是item之前的小圆点或者数字序号部分)是在li之外的,但从逻辑上说它属于list的一部分,在list之内。而IE使用margin,实际上就导致了marker部分是悬于list之外。实际上,如果list获得了layout(hasLayout),你就发现marker不见了!因为在IE臭名昭著的layout模型里,hasLayout之后,元素对象会自行处理其所占据区域的呈现,但是无法处理其区域之外。这也是其的width/height实际上类似min-width/min-height的原因,因为它无法绘制overflow到外面的部分。

<style>
ol { background:green; }
ol#myList2 { zoom:1; }
</style>

<ol id="myList1">
	<li>First item...</li>
	<li>Second item...</li>
	<li>Third item...</li>
</ol>

<ol id="myList2">
	<li>First item...</li>
	<li>Second item...</li>
	<li>Third item...</li>
</ol>


所以,比较好的方法就是给所有网页统一list的margin和padding,比如:
ol, ul { margin-left:0; padding-left:40px; }

或者也可以只针对IE进行修复:
ol, ul { _margin-left:0; _padding-left:40px; }
分享到:
评论
1 楼 kratos 2007-11-09  
一直都没用OL 哈 原来这里还有点细节

相关推荐

    关于ol和ul的padding和margin默认值

    在《CSS Mastery》一书的第5章中,作者说IE和Opera使用margin-left来缩进列表,而Safari和Firefox使用padding-left。经过我的实际测试,发现Opera 9(我实测的是Opera 9.23)同FF和Safari一样,也是使用padding-left...

    css3-ul-ol列表

    本资源"css3-ul-ol-list"应该包含了一系列使用CSS3对`ul`和`ol`进行美化设计的示例。 首先,CSS3允许我们自定义列表项(`li`)的标记。默认情况下,`ul`列表的标记是无序的小圆点,`ol`列表则是数字。但通过`list-...

    ul的li样式

    这可以通过设置`list-style-type`和`margin`、`padding`属性实现: ```css ul { list-style-type: none; margin: 0; padding: 0; } ``` 2. **颜色和边距**:可以使用`color`、`background-color`、`padding`...

    DIV CSS布局教程:应用ul、li实现表格形式

    - 使用`&lt;ul&gt;`和`&lt;li&gt;`的优点在于可以根据需要调整列数,只需改变`&lt;ul&gt;`的总宽度和`&lt;li&gt;`的宽度。 - 这种方法对于响应式设计特别有用,因为可以通过媒体查询轻松地更改列数或单元格样式。 4. **Web标准与表格的...

    div ul li排列图片的样式

    在本场景中,我们要讨论的是如何使用CSS(Cascading Style Sheets)来对`div`内的`ul`和`li`元素进行样式设置,特别是将图片以特定方式排列。`div`常作为容器,`ul`和`li`则常用于创建无序列表,这里可能是指将一...

    ul li做横向导航

    本文将深入探讨如何利用`&lt;ul&gt;` 和 `&lt;li&gt;` 创建横向导航,并通过CSS进行样式调整。 首先,让我们了解基本的HTML结构。一个简单的`&lt;ul&gt;` 与多个`&lt;li&gt;` 子元素组成的导航菜单如下: ```html &lt;ul class="horizontal-...

    CSS中的ul与li样式详解共5页.pdf.zip

    2. **内边距和外边距**:使用`padding`和`margin`属性可以调整列表项之间的间距。`padding`控制内容区域与边框之间的距离,`margin`则定义元素与周围元素之间的空白。 3. **背景颜色和图像**:可以使用`background-...

    修改UL和LI间隔的简单方法

    当涉及到修改UL和LI元素的间隔时,CSS提供了两个主要的属性:margin和padding。Margin属性用于设置元素外边距,即元素之间的空白区域,而padding属性设置元素的内边距,即元素内容与边框之间的空间。 在上述信息中...

    WEB前端开发必备之浏览器兼容性处理方法大全[借鉴].pdf

    2. ul和ol列表缩进问题,解决方法是消除ul、ol等列表的缩进时,样式应写成:{list-style:none;margin:0px;padding:0px;}。 九、显示类(display:block,inline) 1. display:block,inline两个元素display:block; //...

    css+ul设计的多级导航菜单

    在网页设计中,导航菜单是不可或缺的部分,它帮助用户快速浏览和访问网站的不同部分。本文将详细介绍如何使用CSS(层叠样式表)结合HTML的无序列表(`&lt;ul&gt;`)元素来创建一个多级的导航菜单,无需编写JavaScript代码...

    JS实现左右无缝轮播图代码

    ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolute;top: 0;left: 0} .img li{float: left;} ....

    XHTMl 第三章源代码

    #lstatistics ul, #lhotblog ul, #lrecent ul, #lapply ul{ list-style-type:none; padding-top:12px; padding-left:10px; padding-right:5px; margin:0px; } #lstatistics li{ text-align:left; padding-...

    用“ul li”及css制作韩国风格菜单.rar

    这个"用“ul li”及css制作韩国风格菜单.rar"压缩包文件包含了一整套实现这一效果所需的资源和代码。 首先,`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)是HTML中用于创建列表的标准元素。在构建菜单时,`&lt;ul&gt;`通常作为...

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

    3. `&lt;li&gt;`:列表项,用于在`&lt;ul&gt;`或有序列表`&lt;ol&gt;`中定义单个条目。 接下来,我们将逐步构建这个横向导航栏: **步骤1:HTML结构** 首先,我们需要创建一个`&lt;div&gt;`作为导航栏容器,然后在其中嵌套一个`&lt;ul&gt;`标签...

    jquery 经典动画菜单效果代码

    } .menuBox ul { margin:0px; padding:0px; } .menuBox ul li { float:left; display:block; width:18%; height:30px; line-height:25px; list-style:none; margin-right:1px; } .menuBox ul li a { display:block;...

    div-css-漂亮的导航条

    margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } img { border: none; } ...

    网页制作代码+课程总结

    list-style:none; } #daohang ul li{ text-align:center; float:left; width:90px; } #daohang a{ background-image:url(images/bj01.jpg); display:block; margin:0px; padding-top:10px; padding-right:0...

    CSS列表样式设计

    通过调整`margin`和`padding`属性,可以改变列表项之间的距离和内边距: ```css li { margin-bottom: 10px; /* 设置列表项间的垂直间距 */ padding-left: 20px; /* 设置项目符号与文本的水平距离 */ } ``` 五、...

    CSS实现ul和li横向排列的两种方法

    本文将详细介绍两种利用CSS实现`&lt;ul&gt;`和`&lt;li&gt;`横向排列的方法。 ### 方法一:使用`float:left` 首先,我们可以使用`float`属性来改变`&lt;li&gt;`元素的行为。默认情况下,`&lt;li&gt;`是块级元素,占据一整行。通过将`&lt;li&gt;`的...

Global site tag (gtag.js) - Google Analytics