html - Height and width in <li> element nested in a <nav> not working -


i'm writing bit of code , it's not working sizing (height , width) of different classes in nav. can please explain why? other attributes running (font-size, etc...). i'm running in chrome , firefox.

the html :

<nav>     <ul>         <li class="social">a</li>         <li class="bookmarks">b</li>         <li class="logo">brand</li>         <li class="meta-putsches">c</li>         <li class="login">d</li>     </ul> </nav> 

the css :

nav {   display: block;   margin: auto; } nav ul {   margin: 0;   padding: 0; } nav ul li {   display: inline;   background-color: #000000; } nav ul li.logo {   width: 16em;   height: 65px;   font-size: 53pt;   font-weight: bold;   line-height: 59pt;   color: #f4f4f4; } 

your display: inline; on li element culprit. can't set width or height on inline elements. should change display: inline-block;, ensure flow not disturbed enables setting width , height on elements. have read here @ w3 specification find out more how works , why works way does.


Comments

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -