59 posts
  • Has been part of the Envato Community for over 7 years
  • Has sold $10,000+ on Envato Market
  • Located in Belgium
  • Had an item featured in an Envato Bundle
+2 more
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!

306 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Won a Most Wanted contest
+4 more
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.

59 posts
  • Has been part of the Envato Community for over 7 years
  • Has sold $10,000+ on Envato Market
  • Located in Belgium
  • Had an item featured in an Envato Bundle
+2 more
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

306 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Won a Most Wanted contest
+4 more
BittLoader says

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

76 posts
  • Has referred 100+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+4 more
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! ;)

815 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Contributed a free file of the month
+3 more
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
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
SimpleSites4U says

Nth child Maybe? Works for me

324 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+2 more
NikolaSusa says

Try to solve it with masonry(isotope).

954 posts
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Won a Most Wanted contest
+3 more
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