How to display inline several with 100% width?

Question

I have the following html:

  

    
element 1
    
element 2
  
<         


        
      

Answer 1

I think that what you want to do is not possible in cross-browser css and html; if you set the width of the li to 100%, you set it to the width of its parent element and what you really need is for the parent element (the ul) to have the width of all li's combined. And you cannot set the width to x-times the screen width using just css.

And even if you could, it would also grow the li's as the are told to be 100% of its parent element. Sort of a chicken and egg problem for the browser.

In javascript is's easy though, just calculate the number of li's, set their width to the screen width and set the ul width to (the number of li's) x (screen width).