Có thể làm with %, hoặc javascript. Tuy nhiên không lúc nào cũng đạt được.
Cách xử lý: dùng CSS display: table, display:table cell
Compatiple: Firefox, Chrome, Safary, IE8++, IE7 (need use display-table.htc).
Source view:
<!DOCTYPE html>
<html>
<style type="text/css">
#footer_menu {
display: table; text-align: center; width: 100%;
}
#footer_menu ul {
display: table-row; list-style: none; margin: 0; padding: 0;
}
#footer_menu li {
display: table-cell; border:1px solid red;
}
</style>
<!--[if lte IE 7]>
<style>
#footer_menu {
-dt-display: table;
behavior: url(display-table.min.htc);
}
#footer_menu li {
-dt-display: table-cell;
}
</style>
<![endif]-->
<body>
<div id="footer_menu">
<ul>
<li class="nav_l" style="width:80px;border:1px solid blue;background:#000;"><a href="#">Link</a></li>
<li class="nav_l"><a href="#">Link</a></li>
<li class="nav_r"><a href="#">Link</a></li>
<li class="nav_r"><a href="#">Link</a></li>
<li class="nav_r"><a href="#">Link</a></li>
<li class="nav_r"><a href="#">Link</a></li>
</ul>
</div>
</body>
</html>
0 nhận xét:
Đăng nhận xét