<div id="undermeny">
<ul>
<li><a href="index.html" id="current">Länk nummer ett</a></li>
<li><a href="index.html">Länk nummer två</a></li>
<li><a href="index.html">Länk nummer tre</a></li>
<li><a href="index.html">Länk nummer fyra</a></li>
<li><a href="index.html">Länk nummer fem</a></li>
<li><a href="index.html">Länk nummer sex</a></li>
</ul>
</div>
Eftersom den totala bredden är 800px har jag satt bredden på varje <li> till 132.50 ((800-5)/6). Jag tar minus fem eftersom jag satt 1px som mellanrum.
Problemet är att antalet länkar i undermenyn varierar mellan 2 och 7. Finns det nått sätt att genom css bestämma att bredden ska vara exakt lika stor. Vill undvika att skapa en css-fil med undermeny_2st, undermeny_3st, undermeny_4st, osv.
Bredden på "Hem" och "Kontaktinformation" ska alltså vara samma.
Här är tre alternativ som alla har sina respektive för- och nackdelar
Koda om menyn som en (X)HTML-tabell (dålig idé om du har tillgänglighetsambitioner eller liknande)
Koda om CS-grundförutsättningarna för menyn så att den beter sig som vore den en tabell (t.ex. genom att ge ul stilen display:table, li display:table-row och a display:table-cell (dålig idé om du funderar på att det skall fungera i MSIE)
Leta upp ett fiffigt Javascript som ändrar bredderna på delarna i din meny när sidan laddats klart (men ddet lär då inte funka för besökare som har avslagen Javascript).
Använda display:table men med skript som fallback för IE.
#undermeny ul { display:table; border-collapse:collapse; table-layout:fixed; width:800px; }
#undermeny li { display:table-cell; }
#undermeny a { display:block; }
<!-- när ie8 kommer ut, om det slutar fungera, ändra till "IE 8" nedan -->
<!--[if lte IE 7]>
<style>
#undermeny li { display:inline; zoom:1; width:expression((800-this.parentNode.childNodes.length)/this.parentNode.childNodes.length); }
</style>
<![endif]-->
268 ms totalt · 3 externa anrop · v20260731065814-full.767b4345
