57 posts
  • Author had a File in an Envato Bundle
  • Belgium
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 6-7 years
  • Sold between 10 000 and 50 000 dollars
humbucker says

Hello,

I would like your advice on this. I need to display inline unknown numbers of elements in a width fixed container. (let’s say 940px) There is a gap between these elements of 20px (with a margin-right) Problem is the last element in line jumps to the bottom even if there is visually enought place, because of that margin.

As I dont know the number of elements, I can’t play with .alpha/.omega css classes, or nth-child css rules…

Any possibility to achieve this ?

Thanks a lot!

303 posts
  • Most Wanted Bounty Winner
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Has been a member for 6-7 years
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Europe
BittLoader says

You can use: ul li:last-child

or the .last() function in jQuery

or a javascript like this:

function highlightLastLI() { var liList, ulTag, liTag; var ulList = document.getElementsByTagName("ul"); for (var i = 0; i < ulList.length; i++) { ulTag = ulList[i]; liList = ulTag.getElementsByTagName("li"); liTag = liList[liList.length - 1]; liTag.className = "lastchild"; } }

Hope this works for you.

57 posts
  • Author had a File in an Envato Bundle
  • Belgium
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 6-7 years
  • Sold between 10 000 and 50 000 dollars
humbucker says

Hi,

This wont help, because I have only one UL, and I have a last element per line, not only last element. But I don’t know how to trace the supposed last element of every row.

ANy idea? Thank you

303 posts
  • Most Wanted Bounty Winner
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Has been a member for 6-7 years
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Europe
BittLoader says

It should be better if you come up with a link, or a screenshot of your code :)

70 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • France
  • Has been a member for 4-5 years
  • Referred between 100 and 199 users
  • Bought between 1 and 9 items
displayinline says

A simple trick I use it to set a negative margin on the parent element, the same size as the gutter. So in your case, you should set a margin-right of -20px to your UL (if it has no fixed width). Thus the right margin of the last element of each line will fit into this space.

As far as I tested this, it works fine in all major browsers, but there may be some cases where it doesn’t.

Hope this helps! ;)

812 posts
  • Author had a Free File of the Month
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 1 and 9 items
  • Referred between 1 and 9 users
  • Serbia
  • Has been a member for 5-6 years
rvision_ says

A simple trick I use it to set a negative margin on the parent element, the same size as the gutter. So in your case, you should set a margin-right of -20px to your UL (if it has no fixed width). Thus the right margin of the last element of each line will fit into this space.

As far as I tested this, it works fine in all major browsers, but there may be some cases where it doesn’t.

Hope this helps! ;)

+1, I am using the same technique

426 posts
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
  • Has been a member for 2-3 years
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • United Kingdom
SimpleSites4U says

Nth child Maybe? Works for me

307 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Microlancer Beta Tester
  • Serbia
  • Sold between 10 000 and 50 000 dollars
NikolaSusa says

Try to solve it with masonry(isotope).

900 posts
  • Sold between 1 000 and 5 000 dollars
  • Most Wanted Bounty Winner
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Microlancer Beta Tester
  • Serbia
  • Exclusive Author
aleluja says


A simple trick I use it to set a negative margin on the parent element, the same size as the gutter. So in your case, you should set a margin-right of -20px to your UL (if it has no fixed width). Thus the right margin of the last element of each line will fit into this space.

As far as I tested this, it works fine in all major browsers, but there may be some cases where it doesn’t.

Hope this helps! ;)
+1, I am using the same technique

+2. Me too.

by
by
by
by
by
by