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;  } 

jsfiddle

any appreciated! :)

add these style css.

p.rightin, p:nth-child(4), p:nth-child(6) {     float: right;     margin: 0px 5px;     width: auto; } 

jsfiddle


Comments

Popular posts from this blog

java - Static nested class instance -

c# - Bluetooth LE CanUpdate Characteristic property -

JavaScript - Replace variable from string in all occurrences -