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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -