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
#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%;
}
If you want the elements to automagically fill the entire container's width and no Javascript, <table>
is there for you. Otherwise there's no way to achieve a 100% width while at the same time keeping the width of each element flexible.
您可以尝试使用CSS显示表属性。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.