Recently made a oblog system template, which involved to the UL, so I sorted out this article + this big picture.
UL is a very common label, but because it in Firefox and IE under the different performance, let people think it is a very difficult to control the label.
UL under Firefox has a padding value, but there is no margin value, and in IE just the opposite, UL has a margin value, but no padding value. "The comparison of the second third example in the following figure shows that"
Under Firefox, the UL list-style default is in the outer edge of the content. Of course, you can use CSS to place the List-style as the inner edge of the content.
By weighing the settings for two browsers: padding:0; margin:0; List-style:inside;. can also be set to the UL padding:0; margin:0; List-style:none, and then add a background image to Li, which is also a good choice.
<style type= "Text/css" >body{font-size:12px; margin:20px; line-height:18px; #box {width:200px; Background-color: #CC9; border: #990 1px solid;} #box ul{padding:0; margin:0; list-style:inside decimal; </style><div id= "box" ><ul><li> this is the first sentence. </li><li> This is the second sentence. </li><li> This is the third sentence. </li><li> This is the fourth sentence. </li><li> This is the fifth sentence. </li></ul></div>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]