By using JavaScript we can automatically set the width of list item elements to match the size of the parent list.
The benefit of using this method is that we can automatically expand the content to the fill the entire width of the list without having to ‘hard-code’ the LI width property directly in the CSS. This is advantageous when the list contains an unknown number of elements, or a number that may change on a regular basis; on a per-page basis for example.
To see this in action, simply change the number of LI elements on this page by altering the URL as follows: ?items=6
Because the DOM cannot retrieve stylistic information unless it's written directly in the elements tag, we cannot determine the left & right Margin or Padding applied to an LI element so this method works easiest when the text is centered.