返回列表 发新帖

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

696.3k 9
swmozowtfl 发表于 2015-7-18 00:11:47|湖北 | 查看全部 阅读模式
ol, ul { padding-left:40px; }; f1 A( @2 G% A( r" H0 D' e# h% x* @
而ie的默认样式是:
6 m& b1 f6 G; G1 `ol, ul { margin-left:30pt; }
* \0 G/ o. V  D. n# c, Jopera 8或者以前的版本是否和ie一样?有兴趣的同志可以自行测试。  u2 H& K0 @( L6 a( b+ `
但这至少说明一点,除了微软之外的浏览器厂商都达成一致意见,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到外面的部分。
# K8 d* M' @9 gcss code复制内容到剪贴板+ h; x; ~' v- W% {% s
<style>! K& D& r& H, ]4 v* ?6 h
ol { background:green; }  _- G+ x; M$ c: G7 M
ol#mylist2 { zoom:1; }
7 B' s- i" O- f9 ^- S/ R</style>
9 S6 F4 k+ [9 k. N# i<ol id=mylist1>
3 e5 i  C( x" ]' ]- l<li>first item...</li>
" a9 ?: g' S5 X  Y- r# w4 A& F& l1 d<li>second item...</li>4 S) ~7 r/ F% x# [0 @; R5 l# q' ]% T
<li>third item...</li>  C# W9 d# g2 a8 P
</ol>
( z, O6 t: C5 {  a. \, d' ~  M<ol id=mylist2>
6 L& n3 q- s! N' M<li>first item...</li>
! g' `2 s  a' s- E9 v<li>second item...</li>
: D# ~" v2 z# S" ^2 H0 t' _<li>third item...</li>
, T. a5 ?6 h. {0 H</ol>+ ?# S6 B  J3 {; Z2 v' T; N
所以,比较好的方法就是给所有网页统一list的margin和padding,比如:' a( I' X+ F9 S" [. ^' f
ol, ul { margin-left:0; padding-left:40px; }
0 E$ K. A5 X8 v) g0 e; Z或者也可以只针对ie进行修复:* }& j; J0 n' w  U- C3 \9 ^% S
ol, ul { _margin-left:0; _padding-left:40px; }
6 s% ^3 u+ `  u' O3 R' Z0 G3 Y下面是其他网友的补充:. R& }/ f& e. t
ul标签的padding与margin默认值 40px
( F0 O9 r: ]; P% Rul标签的padding与margin默认值* x6 w! W. C- B: h6 D
ul标签在ff中默认只有padding值(即:padding-left:40px),而在ie中只默认有margin值(即:margin-left:40px),所以先定义 ul{margin:0;padding:0;}就能解决大部分问题。. f/ _# Q3 k7 z' F0 u
一般都在总样式规定一下:body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img {padding:0;margin:0;}5 P: v( A4 v! V
/ j5 D6 h: |- `( _3 |0 K
更多网页制作信息请查看: 网页制作

回复|共 9 个

Acropozelan 发表于 2015-11-25 14:01:16|伊朗 | 查看全部
终于看完了~~~
bqtklouu 发表于 2015-11-25 14:01:17|美国 | 查看全部
哎 怎么说那~~
GoodyFouppy 发表于 2015-11-25 14:01:26|加拿大 | 查看全部
哈 你逗逗他啊
GoodyFouppy 发表于 2015-11-25 14:02:00|美国 | 查看全部
兄弟....表给偶丢丢哦....
wwdu926a 发表于 2015-11-25 14:02:11|美国 | 查看全部
晕 在我帖里面找偶像啊??
seazvyt 发表于 2016-3-17 13:23:13|非洲 | 查看全部
综上所述,恳请各位官员请勿动用武装力量请勿跨村、跨镇、跨市、跨省、跨国、跨洲、跨星球、跨银河系追捕。确因不抓不足以平民愤,或不抓就领不到薪水养家户口的公职人员,建议携带工作证
bqtklouu 发表于 2016-3-17 13:24:10|加拿大 | 查看全部
额~哦........偶无语
wwdu926a 发表于 2016-3-17 13:24:28|巴西 | 查看全部
那个家 让它沉下去吧! 不要啦
tohme 发表于 2016-3-17 13:24:33|加拿大 | 查看全部
俺灌的不是水,是寂寞啊!

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 得知互动-专注Ai与站长技术交流社区-Ai交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表