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

CSS 表示テーブル プロパティを使用してみることができます。

于 2012-06-30T15:29:55.947 に答える
0

要素がコンテナーの幅全体を自動的に埋め、 Javascriptを使用しないようにしたい場合は、それで十分<table>です。そうしないと、各要素の幅を柔軟に保ちながら、100% の幅を実現する方法がありません。

于 2012-06-30T15:25:59.243 に答える