使项目适合容器的宽度

Question

I have 10 items in a container and each of them has margin from right hand side. With jquery, I am removing margin for every fifth item, but as the container's width is in percentage and item's width is in percentage as well, when I minimize or maximize my screen, items don't stretch to the end of container. How can I do it?

Here is the Fiddle

Answer 1

Just give a percentage to the right margin.

The divs total width is 16% x 5 = 80% of the total width. So, the remaining width is 20%. Divide that by 5 (total div margins) and set to 4%:

margin-right:4%;

Check the DEMO

And also, you don't need jquery here to apply margin-right: 0 to the fifth element. You can use css as shown below:

li:nth-child(5n){
    margin-right: 0px;
}