ul li菜單-使li：s充滿整個ul嗎？

Question

示例：http： http://83.254.82.145:8080/android/ ： http://83.254.82.145:8080/android/

如果將鼠標懸停在地圖上，您會看到一個菜單：

<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>

當前的CSS：

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

如果您將填充增加到0 67px您將了解之后的情況。 有沒有辦法在不使用JavaScript的情況下對此做出動態解決方案？ 我只是希望li：s填滿整個ul，而不是每次添加菜單項時都要衡量自己。

謝謝

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%;
}

Answer 2

如果您希望元素自動填充整個容器的寬度並且沒有Javascript，則可以使用<table> 。 否則，無法實現100％的寬度，同時保持每個元素的寬度靈活。

Answer 3

您可以嘗試使用CSS顯示表屬性。