ul和ol的一些知识
ul和ol的一些知识
div#div0 ul{ border:1px solid #ccc; list-style:none; } div#div0 ul li{ border:1px solid green; } /* 我们直接这样布局 ul会有一个默认的padding-left:40px;这个是用来放置我们的list-style的滴呀,只不过我们把它设置成了none
没有显示出来,单空间位置没有消失滴呀 和margin:16px 0px; */
看看我们的盒子模型:(当我们需要的时候,可以将margin 和padding 都设置为0)
当我们利用它来制作横向的菜单时:你可能会这么干;
div#div1 ul{ border:1px solid #ccc; list-style:none; } div#div1 ul li{ border:1px solid green; float:left; }
当li浮动起来的时候,ul就没有被“撑开” 如图:
解决方法一:在最后一个li的后面加上一个 <br style="clear:both;" />,目的是为了清除浮动,
ps:清除浮动的方式很多,改天做个总结;
解决方法二:不用浮动,li默认滴块级别元素,可以把它设置成display:in-line;内联元素;缺陷:内联元素的width和height由自身内容决定,
所以你无法设置width和height
css:
div#div2 ul{ border:1px solid #ccc; list-style:none; } div#div2 ul li{ border:1px solid green; display:inline; }
这里我们再来总结一下:list-style;
list-style:outside circle;
list-style:inside circle;
第一参数时用来设置显示的位置,在内部还是在外部,第二参数的值就很多了,有圆,小圆点,罗马数字等等;
不过有时后我们也可以自定义滴呀;
list-style:url(images/border.png) outside;
接下来就是我们的ol了滴呀