Menu
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
624
fit-content as min- or max-widthYou can also use fit-content as a min-width or max-width value; see the example above. The first means that the width of the box varies between min-content and auto, while the second means it varies between 0 and max-content.
fit-to-width. js is a tiny JavaScript library for fitting text into text containers in a typographically sensitive way, using standard CSS.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
