Recently made a oblog system template, which involves the UL, so I sorted out this article + this big picture.
UL is a very common label, but because of its different performance under the Firefox and IE, people feel that it is a very difficult to control the label.
UL in Firefox has a padding value, but there is no margin value, and in IE, the opposite, UL has a margin value, but no padding value. "The second and third example in the comparison can be seen in the"
Under Firefox, UL's List-style is on the outside edge of the content by default. Of course, the List-style can be set to the inner edge of the content via CSS.
Get the right settings for two browsers by trade-offs: padding:0; margin:0; List-style:inside;. You can also set the UL to padding:0; margin:0; List-style:none, and then add a background image to Li, is also a good choice.
<textarea id="runcode79858"><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> <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></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
