I have a horizontal menu with 9 inline list items contained inside a parent div that is approx. 1000 pixels wide. Currently, I have the list items spaced by using a padding-right and padding-left definition in pixels.
What I’m running into, however, is that when the user’s default font changes to a definition lower in the font string (some of which are wider or larger), the list items bump down to the next line because they increase in size.
Does anyone know how I can space these items using percentages, or something similar, so that when the list expands, it adjusts the padding accordingly, allowing the list to continue to fill 100% of the parent element? Or maybe a better solution to solve this problem?
The attached image has the parent div highlighted in pink to better illustrate what I’m trying to describe.