html - Navbar align part right part left errors -
i'm trying create navbar items on left , items on right (item 1 on left, items 2 , 3 on right). jsfiddle has current code.
what have tried fix issue:
float: right
text-align:right
none of them seem work. i'm sure there super simple solution, can't think of it.
html:
<div class="navbar"> <!--create button home --> <p class="innav">num1</p> <p class="hl">|</p> <p class="rightin">num2</p> <p class="hl">|</p> <p class="rightin">num 3</p> <p class="hl">|</p> </div>
css:
div.navbar{ width:100%; height: 30px; background-color: #03572c; } p{ display: inline; } p.innav{ color:white; font-size: 24px; width: 30px; height: 30px; margin-left: 10px; margin-top: 10px; } p.rightin{ color:white; font-size: 24px; width: 30px; height: 30px; margin-left: 10px; margin-top: 10px; } .hl{ margin-left: 10px; color:white; font-size:24px; }
any appreciated! :)
add these style css.
p.rightin, p:nth-child(4), p:nth-child(6) { float: right; margin: 0px 5px; width: auto; }
Comments
Post a Comment