css - Right align and left align ul li elements in horizontal navigation bar -

css - Right align and left align ul li elements in horizontal navigation bar -

i coding horizontal navigation bar site. html follows:

<nav> <ul> <li class="special_text"><a href="#">hello1</a></li> <li><a href="#">hello2</a></li> <li><a href="#">hello3</a></li> </ul> </nav>

the css follows:

* { margin: 0; padding: 0; } body { background-color: white; margin: 15px auto; border: 1px solid black; } header { } ul { list-style: none; padding: 1em 0; border-bottom: 2px solid #61f231; border-top: 2px solid #61f231; } li { display: inline; padding: 0 1.5em; border-left: 2px solid #61f231; } li.special_text { font-size: 200%; font-weight: bold; color: black; font-family: "arial black"; } li.special_text { text-decoration: none; }

i have <li> elements aligned left while others align right. when seek float ones want left or right there problem vertical alignment (the elements no longer vertically aligned within <ul> element.

part of problem arises fact first <li> element uses different size font.

any suggestions?

thank you

basically, need wrap want in divs , float them left , right:

<nav> <ul><div class="floatleft"> <li class="special_text"><a href="#">hello1</a></li> </div> <div class="floatright"> <li><a href="#">hello2</a></li> <li><a href="#">hello3</a></li> </div> </ul> </nav>

and add together css:

.floatleft { float:left; } .floatright { float:right; }

to prepare issue vertical aligning, need mess around line-height affected li elements

check out fiddle

css