I'm looking to create a grid display using divs with inline-block display and margin-right. However, I'm facing an issue where the last item on each row also has a redundant margin-right. Here's a snippet of my CSS:
.item{
height:20px;
width:50px;
background:red;
margin-right:50px;
display:inline-block;
border:2px solid black;
}
.container{
background-color:green;
width:270px;
}
Here's an example of the HTML structure:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
I've created a fiddle to demonstrate this issue: http://jsfiddle.net/8HPWn/
Since each item's width can vary in the project, I can't rely on targeting every Nth child to solve this. Does anyone know how I can eliminate the redundant margin-rights?