Two cases of the background Small Icon property setting of the UL Li in CSS

UL Li background Small icon property settings generally have two kinds of situation: the definition in the UL and Li, these two definitions in what circumstances use, in the following gives a detailed introduction, often div+css layout of friends may wish to refer to, I hope to help

 

here we are listed in two ways:
① when the icon before the title is a long strand rather than a single point or similar icon, in the definition background figure background to be defined in <ul>. Because it's so long, I put it in <ul> outside of <li>.
② when the icon in front of the title is a single bit or a square or other similar icon, define the background map background to be placed in <li>

A

Copy Code code as follows:


&lt;style&gt;


. test1 {width:100px; height:265px background:url (http://www.86image.cn/statics/images/show/li.jpg) no-repeat Scroll 0 8px; }


. test1 li {padding-left:30px; line-height:27px; list-style-type:none;}


&lt;/style&gt;


&lt;ul class= "Test1" &gt;


&lt;li&gt;one&lt;/li&gt;


&lt;li&gt;two&lt;/li&gt;


&lt;li&gt;three&lt;/li&gt;


&lt;li&gt;four&lt;/li&gt;


&lt;li&gt;five&lt;/li&gt;


&lt;li&gt;six&lt;/li&gt;


&lt;li&gt;seven&lt;/li&gt;


&lt;li&gt;eight&lt;/li&gt;


&lt;li&gt;nine&lt;/li&gt;


&lt;li&gt;ten&lt;/li&gt;


&lt;/ul&gt;

As illustrated:


B

Copy Code code as follows:


&lt;style&gt;


. test1 li {padding-left:15px; Background:url ("Http:www.86image.cn/statics/images/tpl1/images/icon_fk.gif") No-repeat scroll 1px 8px; line-height:22px; List-style-type:none;}


&lt;/style&gt;


&lt;ul class= "Test1" &gt;


&lt;li&gt;1&lt;/li&gt;


&lt;li&gt;2&lt;/li&gt;


&lt;li&gt;3&lt;/li&gt;


&lt;/ul&gt;

As illustrated: