CSS: selecting the last float <li> on the same horizontal row [duplicate]

Question

I am using the following CSS for arranging list of boxes:

 li {
     display: block;
     float: left;
 }

I'd like to carefully tune margins of <li> items so that the last item on the row (horizontal span) would get different margins.

Are there any CSS selectors which could target float elements based on their position?

Answer 1

Usually, your best bet is to create a negative right margin on your containing block, e.g.:

<ul>
  <li>Stuff Here</li>
  <li>Stuff Here</li>
  <li>Stuff Here</li>
  <li>Stuff Here</li>
  <li>Stuff Here</li>
  <li>Stuff Here</li>
  <li>Stuff Here</li>
</ul>

<style>
 li {
     float: left;
     width: 30%;
     margin-right: 3%;
     }
 ul {
     margin-right: -3%; /* compensate for last float %/
     }


</style>

My example is hastily written, but I'd note that the outer negative margin doesn't have to be the same. You'll have to fiddle.

Does that help?