html - Height of <li> elements equal to height of <navigation> -
body { margin: 0; } .header { width: 80%; height: 20%; margin-left: 10%; position: fixed; top: 0; border-style: solid; border-width: 1px; background-color: green; } .image { width: 20%; height: 100%; float: left; border-style: solid; border-width: 1px; } .navigation { width: 79%; height: 100%; float: right; text-align: right; border-style: solid; border-width: 1px; } li { height: 100%; display: inline; border-style: solid; border-width: 1px; background-color: blue; } <div class="header"> <div class="image"> image </div> <nav class="navigation"> <li> 1.0 main menu </li> <li> 2.0 main menu </li> <li> 3.0 main menu </li> </nav> </div> with code above create <header> consisting of <image> , <navigation>. <image> , <navigation> match height of surrounding <header>.
inside <navigation> put <li> elements , want them have same height surrounding <navigation>. therefore, gave them property height: 100%; did <image> , <navigation> not seem work.
what have change in code <li> elements match height of surrounding <navigation> element?
you can find code here: https://jsfiddle.net/5jv8m5xf/28/
you have use inline-block instead of inline display property list element.
Comments
Post a Comment