Question

示例：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显示表属性。

ul li menu - make li：s填满整个ul？

3 个答案: