Justified Horizontal List Menu

Get Started
1

Does anyone have a good method for justifying a horizontal list menu so that everything is evenly spaced, regardless of content (within reason of course). I know I can space it manually, but I was wondering if there was a better way.

Thanks.

2

/* this is a css code ,put it before </head> at the top of the html page or in the css external file*/

<style type=“text/css”>
ul.horz_menu
{
list-style:none;
}
ul.horz_menu li
{
float:left;
}
ul.horz_menu li a
{
display:block;
padding:3px 15px 3px 15px;
background:#EEEEEE;
color:#666666;
text-decoration:none;
text-align:center;
}
ul.horz_menu li a:hover
{
background:#CCCCCC;
color:#333333;
}
</style>

you can cotrol your menu items spacing by changing the value of the right and the left padding in the css code… that’s it

<!-- this is a HTML code put it where you want your menu to be placed –>
<ul class=“horz_menu”>
<li><a href=“#”>link</a></li>
<li><a href=“#”>link</a></li>
<li><a href=“#”>link</a></li>
<li><a href=“#”>link</a></li>
<li><a href=“#”>link</a></li>
</ul>

i hope to find this snippet useful… or answer your question :slight_smile: waiting your feedback

3

Assuming this structure:

<ul>
  <li><a href="#">somewhere</a></li>
  <li><a href="#">somewhere</a></li>
  <li><a href="#">somewhere</a></li>
  <li><a href="#">somewhere</a></li>
  <li><a href="#">somewhere</a></li>
</ul>

There are a couple of methods. In one, make each li a width equal to the percentage of the total width available, and float it.

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;   /* remove the indention */
  overflow: hidden;   /* to enclose the float children */
  }

li {
  width: 20%;  /* actually, use some slightly undersized value to supply a bit of slop */
  float: left;
  }

Alternatively, make the items inline, and justify the text.

ul {
  margin-left: 0;
  padding-left: 0;   /* remove the indention */
  text-align: justify;
  }

li {
  display: inline;
  }

cheers,

gary

4

Hi Samanime, sorry I missed this thread! :slight_smile:

Some time ago there was a quiz #24 in the CSS forum, where one task was to create a distributed horizontal menu.

See the second part of the solutions and read later posts for ideas how to justify a horizontal menu.