CODEWITHSUNDEEP
css
Jitendra Vyas
Jitendra Vyas

Reputation: 152677

How to remove margin from every element that is the last element in a row?

How to remove margin from every <li> of last column? I'm asking for every <li> which comes in last column when I have 9 <li> and 3 in each column. I'm not asking just to remove margin from last item of last <li> of a <ul> which I already know :last-child { margin-right: 0 }

And if screen is small or user resize the browser then 3 + 3 + 3 can become to 4 + 5 or 2 + 2 + 2 + 2 + 1

So in any condition any <li> ( it can be one or more then one) which comes in last column. I want to remove margin-right.

All li are within a single ul

<ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
   <li>item 5</li>
   <li>item 6</li>
   <li>item 7</li>
   <li>item 8</li>
   <li>item 9</li>
</ul>

I added jsfiddle here: http://jsfiddle.net/GnUjA/1/

Upvotes: 11

Views: 7056

Answers (5)

Adrian Cical
Adrian Cical

Reputation: 1

I have done a simple solution for a padding 30px of divs. I'm adding 30px to the min width to allow the expansion.

min-width: calc(100% + 30px);

Upvotes: 0

cimmanon
cimmanon

Reputation: 68319

Removing or adding stylings on a specific element of each row cannot be done with pure CSS unless you know exactly how many elements there are per row (via the nth-child() family of selectors).

Negative Margins

What you can to do in the case of margins is disguise them by adding negative margins on the parent element. This will give the illusion that your child elements fit inside the parent element while still having spacing between the individual elements:

http://codepen.io/cimmanon/pen/dwbHi

ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}

Splitting the margin in half and setting it on both sides (margin-left: 5px; margin-right: 5px) may give better results than a single margin on one side (margin-right: 10px), particularly if your design needs to work with LRT and RTL directions.

Note: this may require adding overflow-x: hidden on an ancestor element to prevent horizontal scrolling, depending on how close the container element is positioned to the edge of the viewport.

Media Queries

If you can reasonably predict how many items there are going to be per row, you can use media queries to target the last item in the row via nth-child(). This is considerably more verbose than using negative margins, but it would allow you to make other style adjustments:

@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 500px) and (max-width: 599px) {
    li:nth-child(3n+3) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    li:nth-child(4n+4) {
        margin-right: 0;
        border-right: none;
    }
}
/* etc. */

Upvotes: 15

Joonas
Joonas

Reputation: 7303

To me it makes more sense to give the left side of ul some padding that evens it out.

I added: ul { padding-left: 10px; } - http://jsfiddle.net/GnUjA/30/

Depends if it would be necessary but same really goes to the top:

ul { padding-top: 10px; padding-left: 10px; } - http://jsfiddle.net/GnUjA/31/

Upvotes: 0

James Montagne
James Montagne

Reputation: 78650

I believe this is what you want (jquery):

http://jsfiddle.net/PKstQ/

If that fiddle demonstrates what you are looking to do (except with margin instead of background-color) then you can't do that with css. You will need javascript. If jquery is acceptable then that posted fiddle can easily be modified. Would be relatively trivial to turn it into pure js as well.

Upvotes: 0

Jon
Jon

Reputation: 437386

Edit: Answer rewritten after looking at sample HTML

What you want to do is not possible with CSS. The reason is that you want to style elements based on the rendered layout, which CSS only allows you to work based on the document structure.

Something like this is only achievable with client-side scripting (Javascript), which can query rendered layout properties and act accordingly.

Upvotes: -1

Related Questions