How to display inline several with 100% width?

Question

I have the following html:

  

    
element 1
    
element 2
  
<         


        
      

Answer 1

You want it to act like a good old fashioned table:

  
one
  
two
  
three



.menu {
    display: table;
    width: 100%;
}
.menu li {
    display: table-cell;
    padding: 2px;

    background: #900990;
    border: 1px solid yellow;
    color: white;
}

then you can also collapse it nicely when the page is small:

/* responsive smaller screen turn into a vertical stacked menu */
@media (max-width: 480px) {

   .menu, .menu li {
       display: normal;
    }

}