html - navbar list items changing size depending on list string length -


i made navbar supposedly has list items evenly distributed along navbar, although seems list items longer string lengths have bigger width others. there way fix this?

<div id="menu-bar">     <ul>         <li><a href=#>home</a></li>         <li><a href="ferrari.html">ferrari</a></li>         <li><a href="lamborghini.html">lamborghini</a></li>         <li><a href="bugatti.html">bugatti</a></li>     </ul> </div> 

css:

* {     margin: 0px;     padding: 0px; }  #menu-bar { background-color: #51f069; width: 100%; height: 40px; border-top: 2px solid #8f8f8f; border-bottom: 2px solid #8f8f8f; display: table; }  #menu-bar li { list-style-type: none; display: inline-block; font-family: ferrari; display: table-cell; text-align: center; }  #menu-bar { display: block; font-size: 25px; line-height: 40px; }  #menu-bar ul { width: 100%; display: table; } 

this default behavior, they're set display:table-cell. if @ html table, cells longer content take more space in table.

simply set width list-items :

#menu-bar li {     list-style-type: none;            font-family: ferrari;     display: table-cell;     text-align: center;     width: 25%; /* 100% / 4 li's */ 

}

here's fiddle : http://jsfiddle.net/sa7x258k/1/


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -