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