在《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; }
分享到:
相关推荐
在《CSS Mastery》一书的第5章中,作者说IE和Opera使用margin-left来缩进列表,而Safari和Firefox使用padding-left。经过我的实际测试,发现Opera 9(我实测的是Opera 9.23)同FF和Safari一样,也是使用padding-left...
本资源"css3-ul-ol-list"应该包含了一系列使用CSS3对`ul`和`ol`进行美化设计的示例。 首先,CSS3允许我们自定义列表项(`li`)的标记。默认情况下,`ul`列表的标记是无序的小圆点,`ol`列表则是数字。但通过`list-...
这可以通过设置`list-style-type`和`margin`、`padding`属性实现: ```css ul { list-style-type: none; margin: 0; padding: 0; } ``` 2. **颜色和边距**:可以使用`color`、`background-color`、`padding`...
- 使用`<ul>`和`<li>`的优点在于可以根据需要调整列数,只需改变`<ul>`的总宽度和`<li>`的宽度。 - 这种方法对于响应式设计特别有用,因为可以通过媒体查询轻松地更改列数或单元格样式。 4. **Web标准与表格的...
在本场景中,我们要讨论的是如何使用CSS(Cascading Style Sheets)来对`div`内的`ul`和`li`元素进行样式设置,特别是将图片以特定方式排列。`div`常作为容器,`ul`和`li`则常用于创建无序列表,这里可能是指将一...
本文将深入探讨如何利用`<ul>` 和 `<li>` 创建横向导航,并通过CSS进行样式调整。 首先,让我们了解基本的HTML结构。一个简单的`<ul>` 与多个`<li>` 子元素组成的导航菜单如下: ```html <ul class="horizontal-...
2. **内边距和外边距**:使用`padding`和`margin`属性可以调整列表项之间的间距。`padding`控制内容区域与边框之间的距离,`margin`则定义元素与周围元素之间的空白。 3. **背景颜色和图像**:可以使用`background-...
当涉及到修改UL和LI元素的间隔时,CSS提供了两个主要的属性:margin和padding。Margin属性用于设置元素外边距,即元素之间的空白区域,而padding属性设置元素的内边距,即元素内容与边框之间的空间。 在上述信息中...
2. ul和ol列表缩进问题,解决方法是消除ul、ol等列表的缩进时,样式应写成:{list-style:none;margin:0px;padding:0px;}。 九、显示类(display:block,inline) 1. display:block,inline两个元素display:block; //...
在网页设计中,导航菜单是不可或缺的部分,它帮助用户快速浏览和访问网站的不同部分。本文将详细介绍如何使用CSS(层叠样式表)结合HTML的无序列表(`<ul>`)元素来创建一个多级的导航菜单,无需编写JavaScript代码...
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;} ....
#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>`(列表项)是HTML中用于创建列表的标准元素。在构建菜单时,`<ul>`通常作为...
3. `<li>`:列表项,用于在`<ul>`或有序列表`<ol>`中定义单个条目。 接下来,我们将逐步构建这个横向导航栏: **步骤1:HTML结构** 首先,我们需要创建一个`<div>`作为导航栏容器,然后在其中嵌套一个`<ul>`标签...
} .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;...
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...
通过调整`margin`和`padding`属性,可以改变列表项之间的距离和内边距: ```css li { margin-bottom: 10px; /* 设置列表项间的垂直间距 */ padding-left: 20px; /* 设置项目符号与文本的水平距离 */ } ``` 五、...
本文将详细介绍两种利用CSS实现`<ul>`和`<li>`横向排列的方法。 ### 方法一:使用`float:left` 首先,我们可以使用`float`属性来改变`<li>`元素的行为。默认情况下,`<li>`是块级元素,占据一整行。通过将`<li>`的...