Question

Example: http://83.254.82.145:8080/android/

If you hover the map you’ll see a menu:

<div id="map_menu" style="display: none;">
    <ul>
        <li style="background-color: rgb(0, 0, 0);">
                    <a href="javascript:void(0)" id="fitmarkersonmap" style="color: rgb(248, 248, 248);">Fit markers on map</a>
        </li>
        <li style="background-color: rgb(0, 0, 0);">
            <a href="javascript:void(0)" id="togglemaptypes" style="color: rgb(248, 248, 248);">Toggle map types</a>
        </li>
        <li style="background-color: rgb(0, 0, 0);">
            <a href="javascript:void(0)" id="showpopup" style="color: rgb(248, 248, 248);" class="">Show userlist</a>
        </li>
    </ul>
</div>

Current css:

#map_menu ul li {
  float: left;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
}

If you increase the padding to 0 67px you will understand what im after. Is there any way to make a dynamic solution to this, without using javascript? I simply want the li:s to fill up the entire ul, without measuring myself each time i add a menu item.

Thanks

Answer 1

#map_menu ul li {
  float: left;
  height: 40px;
  width: 33%; /* here is the ratio depends on how much <li> you have */
  line-height: 40px;
  text-align: center; /* this makes text in the center of <li> */
}

#map_menu ul li:last-child {
  width: 34%;
}