当设置display:inline;时li的宽度无效的解决方法

若制作导航栏时，使用列表li 的定义时，若想加上一个背景图 ，这时候若定义li的一个属性为:li{display:inline ; width:83px; height:30px;}，则浏览器会无视后面的高和宽属性的定义，按照默认字体大小来显示！

   解决的方法为，将display:inline ,改成 display:block； 和加上float:left; 即可正常，完整的应为：li{display:block; float:left;  margin-right:5px; width:83px; height:30px; } 这样定义的宽和高度都无效，所以可以再添加对应的背景图片了。

即是说对象设置成display:inline;  它会跟在它的前面的同辈元素一起显示在一行上，具体的宽度值等于父元素的宽度减去它前面的同辈元素。

若制作导航栏时，使用列表li 的定义时，若想加上一个背景图 ，这时候若定义li的一个属性为:li{display:inline ; width:83px; height:30px;}，则浏览器会无视后面的高和宽属性的定义，按照默认字体大小来显示！

   解决的方法为，将display:inline ,改成 display:block； 和加上float:left; 即可正常，完整的应为：li{display:block; float:left;  margin-right:5px; width:83px; height:30px; } 这样定义的宽和高度都无效，所以可以再添加对应的背景图片了。

结论：

即是说对象设置成display:inline;  它会跟在它的前面的同辈元素一起显示在一行上，具体的宽度值等于父元素的宽度减去它前面的同辈元素。