0

例子：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，而不是每次添加菜单项时测量自己。

谢谢

4

3 回答 3

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%;
}
于 2012-06-30T15:30:17.073 回答
0

如果您希望元素自动填充整个容器的宽度并且没有 Javascript，<table>那么适合您。否则，无法在保持每个元素的宽度灵活的同时实现 100% 的宽度。

于 2012-06-30T15:25:59.243 回答
0

您可以尝试使用 CSS 显示表格属性。

于 2012-06-30T15:29:55.947 回答