html - Equal Horizontal Menu in CSS (Legacy Support) -
i'm trying build equal horizontal menu in css still supported in older browsers ie9. (yes, know....)
been testing in ff , chrome newer css3 techniques , working excellent! tried in ie9, still need support it.... , failed.
i searched around, , found of these links did trick...
http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
horizontal menu auto width , same dimension of tabs
...however if number of menu items change need either change css or cater x number of menu items multiple declarations...
is there simple 1 case covers support ie9 , still compatible newer browsers without affecting them? (ie: special stylesheet ie9)
thanks.
if understood question correctly, make use of display: table
, display: cell
, in:
.menu { display: table; padding: 0; width: 100%; } .menu-item { display: table-cell; list-style: none; margin: 0; }
<ul class="menu"> <li class="menu-item">option 1</li> <li class="menu-item">option 2</li> <li class="menu-item">option 3</li> <li class="menu-item">option 4</li> </ul>
Comments
Post a Comment