For <ul><li>we need to adjust spacing between the bullet and the text. So I write CSS for ul li but when I want to edit those properties, it’s a bit confusing which property is being used and where. In order to explain this I have a small demonstration using below image that will help you understand CSS properties used in the following example.
A : Distance between text and the bullet i.e. padding-left for li.
B : Bottom distance between two li items i.e. margin-bottom for li.
C, D : Vertical and Horizontal position of a bullet i.e. background-position: x y.
E : margin-left of ul.
HTML Code
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
CSS Code
ul {
margin-left: 20px; /* E */
padding-left: 0px;
list-style:none;
}li {
padding-left: 30px; /* A */
margin-bottom: 10px; /* B*/
background:url(bullet.png) no-repeat 2px 8px; /* C,D */
}
Do drop in your views
4 Comments
Its good and interesting,it works for drop down menus.Author you could have provided its usage and more related to its working.
Actually its not meant for drop down menus, this is just to remember the exact position of the ul li’s margin, padding properties, where it is being used.
Actually just ok..,
Would be better if you give some more…, this is vertical and what about horizontal.
Just saying.., current one is good you done good job. would be better if you give all the probabulities.
There are both vertical and horizontal-A,D,E is for horizontal and B,C is for vertical.