0

i am making business company website, there is a menu bar at top of the page. Now this menubar contains four li tags (below code), these li sticks at left of the page. i want to make it to distribute equally horizontal. Help!

<div id="wrapper-menu">
<div id="menu">
    <ul>
        <li><a href="">home</a></li>
     <li><a href="">about us</a></li>
     <li><a href="">news</a></li>
     <li><a href="">contact us</a></li>
     <li><a href="">links</a></li>
    </ul>
 </div>
   </div>
user1907680
  • 23
  • 2
  • are you using CSS in formatting your page? can you show your CSS code too? – Þaw Apr 29 '13 at 08:50
  • Have a look here, I think this answers your question perfectly (as it's almost the same question): http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu – Pieter VDE Apr 29 '13 at 08:50
  • CSS: #wrapper-menu { background: #88ac0b url('images/menu-background.png') top left repeat-x; float: left; width: 100%; } #menu { width: 60%; margin: 0 auto; font-size: 95%; white-space: nowrap; padding-right: 2px; } – user1907680 Apr 29 '13 at 09:01
  • here is the complete css and html markups jsfiddle.net/NqgZ4. The question is all four li tags should be equally distributed on the wrappermenu – user1907680 Apr 29 '13 at 09:15
  • @user1907680: You should be able to edit your question to include additional information like CSS. Also the jsfiddle link you have given doesn't include the CSS you quoted just now. :) – Chris Apr 29 '13 at 09:33

2 Answers2

0

I'm assuming with no other example that your problem is that you want them to be horizontal instead of vertical (you say they are all on the left). If this is not the problem then this answer will not apply.

You probably want something in your css along the lines of:

li {display: inline-block;}

You may want to look up exactly what inline blocks do but in a nutshell it means the block is not the full width of the screen but just wide enough and the blocks act like inline elements meaning you don't start a new line with each one.

You will of course want further styling to make it look good but this should do the trick I think.

http://jsfiddle.net/NqgZ4/ for a jsfiddle example.

As a followup to your comment to have them spread out then the easiest way is to apply a width to them.

li 
{
    display: inline-block;
    width: 19%;
}

Note that I use 19% instead of 20% to avoid rounding issues that may cause the width to exceed the pixels (eg if the width available is 999 px then 20% would make each of them 200 pixels which would then add up to too much).

If you have a dynamic number of menu items then its a bit trickier and I'd start thinking about a bit of script to equalise them (by setting the widths dynamically) though there may be a pure CSS method that will work with variable number of items.

Updated fiddle: http://jsfiddle.net/NqgZ4/1/

Chris
  • 27,210
  • 6
  • 71
  • 92
  • here is the complete css and html markups http://jsfiddle.net/NqgZ4/. The question is all four li tags should be equally distributed on the wrappermenu – user1907680 Apr 29 '13 at 09:12
  • Added an update to cover spreading them out more. Hopefully this is what you are after. – Chris Apr 29 '13 at 09:31
0

You need to make the li inline-block items, and don't forget to apply a text-align to the ul:

li {
    display: inline-block;
}
ul {
    text-align: center;
}

example here:

http://jsfiddle.net/evmDv/

Moshe Shaham
  • 15,448
  • 22
  • 74
  • 114