Horizontal alignment / alignment of list items?

Question

I have the following situation:

<nav id="access" role="navigation"> <div class="menu"> <ul> <li class="page_item"><a href="#pricing" title="Pricing">Pricing</a></li> <li class="page_item"><a href="#booking" title="Booking">Booking</a></li> <li class="page_item"><a href="#contact" title="Contact">Contact</a></li> <li class="page_item"><a href="#map" title="Map">Map</a></li> </ul> </div> </nav> 

Since the external container in which the navigator is located has a width of 800 pixels, the nav container also has a width of 800 pixels.

 #access .menu ul li { float: left; } 

I float, all menu items are left, so align side by side. I wonder how I can create equal space between all these list items, for example:

 ____________________________________ <- this is what I have now item item item item item ____________________________________ <- this is what I want item item item item item 

Any ideas how to solve this? Or with pure CSS or jQuery?

Answer 1

This answer applies if you want it to work with any number of "li" s:

if you give your personal display: block;

 li {float:left; display:block; } 

then the following script does the job for yours:

 var first = $("li:first"); var allOther = $("li").not(":first, :last"); var last = $("li:last"); var remainingWidth = $(".menu").width() - first.width() - last.width(); allOther.width(remainingWidth / allOther.length).css("text-align", "center"); 

look at it in jsFiddler: http://jsfiddle.net/PLQFj/14/

Answer 2

This method is WORK 100%!

CSS

 .menu { position:relative; text-align:justify; text-align-last:justify; border:1px solid silver; height:2.2em; min-width:800px; } .menu li { display:inline-block; background:silver; padding:.5em 1em; cursor:pointer; text-align:center; } .menu li:hover { background:black; color:white; } .menu:after { content:""; display:inline-block; width:100%; height:0; overflow:hidden; } 

HTML:

 <ul class="menu"> <li>About</li> <li>Company</li> <li>Products</li> <li>Menu item</li> </ul> 

Answer 3

 .menu { text-align: justify; } .menu ul, .menu li { display: inline; } .menu ul::after { display: inline-block; width: 100%; content: ""; } 

But for browser compatibility (IE7) you must replace ::after with an additional markup element:

 <nav id="access" role="navigation"> <div class="menu"> <ul> <li class="page_item"><a href="#pricing" title="Pricing">Pricing</a></li> <li class="page_item"><a href="#booking" title="Booking">Booking</a></li> <li class="page_item"><a href="#contact" title="Contact">Contact</a></li> <li class="page_item"><a href="#map" title="Map">Map</a></li> </ul> <span></span> </div> </nav> 

See the demo script .

Answer 4

FIDDLE: http://jsfiddle.net/QR5s3/

* CSS (changed from floating li to embedded li) *

 #access .menu ul { text-align:center; } #access .menu ul li:first-child { padding-left:0 !important; } #access .menu ul li:last-child { padding-right:0 !important; } #access .menu ul li { display:inline; padding:0 35px; /* ADJUST PADDING */ } 

Answer 5

What about:

 #access .menu ul li { float: left; margin-right: 10px } 

Answer 6

The first method I can think of is to use a table instead of an unordered list. By default, it will look the way you want. In addition, adding more menu items would be easy as alignment is automatic.

Here are some ways to do this.

Answer 7

The only sensible cross-browser approach not related to JavaScript would be <table> , I'm afraid. It is not very elegant, but it does the job. A floating-point layout will not be able to correctly display elements with a variable size. All this should work even in IE 6.

Markup

 <table class="nav"> <tr> <td class="item">item</td> <td class="separator">&nbsp;</td> <td class="item">item</td> <td class="separator">&nbsp;</td> ... </tr> </table> 

Separator must contain   -entity to make sure it displays correctly in all browsers (IE creates problems here, ignoring empty cells).

Style

 .nav, .nav tbody, .nav tr { width: 100%; } .nav .item { /* this forces the item to be as small as possible, which forces the separators to take up the remaining space */ width: 1px; } 

You need to make sure that the contents of all elements have spaces replaced with   to prevent text flow around due to 1px width.

Answer 8

CSS

 #access { border: 1px solid #DDDDDD; height: 50px; width: 800px; } .menu ul li { float: left; } .menu ul { margin: 0; padding: 0 } 

Jquery:

 var li = $('#access ul li').length - 1; var w = 0; $('#access ul li').each(function() { w = w + $(this).width(); }); var eachPlot = ($('#access').width() - w) / li; $('#access ul li:gt(0)').each(function() { $(this).css({ 'margin-left': parseInt(eachPlot) + 'px' }); });