- Author had a File in an Envato Bundle
- Belgium
- Bought between 10 and 49 items
- Exclusive Author
- Has been a member for 5-6 years
- Sold between 10 000 and 50 000 dollars
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!
- Most Wanted Bounty Winner
- Exclusive Author
- Item was Featured
- Sold between 10 000 and 50 000 dollars
- Has been a member for 5-6 years
- Bought between 10 and 49 items
- Referred between 1 and 9 users
- Europe
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.
- Author had a File in an Envato Bundle
- Belgium
- Bought between 10 and 49 items
- Exclusive Author
- Has been a member for 5-6 years
- Sold between 10 000 and 50 000 dollars
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
- Most Wanted Bounty Winner
- Exclusive Author
- Item was Featured
- Sold between 10 000 and 50 000 dollars
- Has been a member for 5-6 years
- Bought between 10 and 49 items
- Referred between 1 and 9 users
- Europe
It should be better if you come up with a link, or a screenshot of your code 
- Sold between 100 000 and 250 000 dollars
- Author was Featured
- Exclusive Author
- France
- Has been a member for 3-4 years
- Referred between 100 and 199 users
- Bought between 1 and 9 items
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! 
- 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 4-5 years
displayinline said
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
- Sold between 5 000 and 10 000 dollars
- Exclusive Author
- Has been a member for 1-2 years
- Bought between 10 and 49 items
- Referred between 1 and 9 users
- United Kingdom
Nth child Maybe? Works for me
- Bought between 10 and 49 items
- Exclusive Author
- Has been a member for 2-3 years
- Microlancer Beta Tester
- Serbia
- Sold between 10 000 and 50 000 dollars
Try to solve it with masonry(isotope).
- Sold between 1 000 and 5 000 dollars
- Most Wanted Bounty Winner
- Has been a member for 4-5 years
- Referred between 1 and 9 users
- Microlancer Beta Tester
- Serbia
- Exclusive Author
rvision_ said
displayinline said+1, I am using the same technique
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!
+2. Me too.
