Right align and align ul li elements in the horizontal navigation bar

Question

I am coding a horizontal navigation bar for my site. The html is as 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> 

css is as 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 a { text-decoration: none; } 

I would like for some <li> elements to align to the left, while others to align to the right. When I try to put the ones that I need left or right, there is a problem with vertical alignment (elements are no longer vertically aligned inside the <ul> element.

Part of the problem arises because the first <li> element uses a font of a different size.

Any suggestions?

thanks

Answer 1

All you have to do is wrap what you want in the divs, and float them left and 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 to your css:

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

To fix the issue of vertical alignment, you need to get confused with line-height with li elements affected

Watch the fiddle

Answer 2

I don’t quite understand what you are trying to achieve, so here are two possibilities based on my interpretation (s) of your requirements:

To have a left and right column:

You can use CSS3 Columns as long as you agree with it, returning to regular (without columns) ul or polyfilling for crappy browsers (um <= IE9)

 nav ul { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-width: 50%; -moz-column-width: 50%; column-width: 50%; -webkit-column-gap: 4em; -moz-column-gap: 4em; column-gap: 4em; } 

 <nav> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> </ul> </nav> 

See:
http://caniuse.com/#feat=multicolumn
<a3>

---

In range Text:

 * { margin: 0; padding: 0; } body { background-color: white; margin: 15px auto; border: 1px solid black; } header { } ul { list-style: none; display:table; width:100%; padding: 1em 0; border-bottom: 2px solid #61f231; border-top: 2px solid #61f231; } li { display: table-cell; padding: 0 1.5em; border-left: 2px solid #61f231; vertical-align:middle; text-align:center; } li.special_text { font-size: 2em; font-weight: bold; color: black; font-family: "Arial Black"; text-align:left; } li.range_left { text-align:left; } li.range_right { text-align:right; } li.special_text a { text-decoration: none; } 

 <nav> <ul> <li class="special_text"><a href="#">Hello1</a></li> <li class="range_left"><a href="#">Hello2</a></li> <li><a href="#">Hello3</a></li> <li class="range_right"><a href="#">Hello4</a></li> </ul> </nav> 

Answer 3

If your elements will not contain more than one line of text, you can use line-height to set the vertical effect. Try the following:

 ul { list-style: none; border-bottom: 2px solid #61f231; border-top: 2px solid #61f231; line-height:2.5em; } /*Remove the padding*/ 

Check Demo Script

Answer 4

Alternatively, you can add an add-on as follows: li:first-child{padding-right: 150px;}

See my fiddle