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
Post a Comment