CODEWITHSUNDEEP
cssmobilebulletedlist
Lill Lansey
Lill Lansey

Reputation: 4915

CSS spacing after each item in list with responsive web design

I am generating a bulleted list on a web site (by using a jquery auto-complete function) and am using responsive web design in the web site.

I want a space after each list item. I have added the following CSS to do so:

 li
 {
    margin-bottom:20px;       
 }

However, when there is word wrap on a list item (say on mobile device), the total line spacing does not change.

I don't get proper spacing between the bottom of the word wrapped item and the next item.

The display looks like this:

enter image description here

How can I get the spacing to look like this:

enter image description here

I tried putting up a jsfiddle, but can't get the css for the jquery autocomplete (that works in my app) to work, let alone the css for the line spacing I added.

Here it is anyway, fyi:

http://jsfiddle.net/2hwn4/

Upvotes: 0

Views: 539

Answers (1)

Brian Glaz
Brian Glaz

Reputation: 15686

Are you familiar with CSS specificity? http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

If your code is like the fiddle you posted, inspecting an li item in the autocomplete will show you that the following attributes are being applied (coming from the jquery ui css file):

.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    zoom: 1;
    width: 100%;
}

This rule is more specific than your

li
 {
    margin-bottom:20px;       
 }

So, the actual bottom margin being applied is 0. To fix this, you can do a margin-bottom: 20px !important; (*not recommended), or use the same selector to overwrite the jquery ui (assuming your CSS is loaded after jquery ui css) like this:

.ui-menu .ui-menu-item {
   margin-bottom: 20px;
}

Upvotes: 1

Related Questions