1、ul本身是块级元素,在实际运用中,我们不设定宽高的话,它的宽就是父元素的宽,它的高就是内容撑起来的高度。
2、在局部布局的时候,我们可以不用设定ul的宽度和高度,直接使用margin来巧妙布局。
3、上述如果设定了ul或者其他盒子的宽度以后,会出现一个问题就是margin-left的值过大,盒子接近了另外盒子的边缘,再设置margin-right的时候如果值超过显示的距离那么将无效。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div { 400px; height: 250px; border: 1px solid #E4E4E4 } ul { list-style: none; padding: 0px; margin-top: 20px; margin-left: 10px; border: 1px solid #eee; margin-right: 10px; } li { height: 29px; line-height: 29px; border:1px dashed #eee; } li.first{ color:red; } </style> </head> <body> <div> <ul> <li class="first">首页</li> <li>首页</li> <li>首页</li> <li>首页</li> <li>首页</li> </ul> </div> </body> </html>
效果: