CODEWITHSUNDEEP
cssmenu
user2235750
user2235750

Reputation: 1

Distribute multiple items with different widths evenly on an menu

I have been trying to find a solution to a common problem but due to some CSS rules in my code I can't use any of the solutions that I have found. I have an horizontal menu (a <ul> <li> <a>) with different items, with different widths and I am not able to distribute the items inside the menu so they have the same space between each other. This is the code:

<nav id="main-menu">
     <ul class="child-menu">
         <li class="menu-1"><a>outsourcing tecnologico</a></li>
         <li class="menu-2"><a>seleccion de personal</a></li>
         <li class="menu-3"><a>solucion integral de nuevos profesionales</a></li>
         <li class="menu-4"><a>consultoria</a></li>
         <li class="menu-5"><a>formacion especializada</a></li>
         <li class="menu-6"><a>I+D+I<a></li>
    </ul>
</nav>

The CSS :

#main-menu {
    background-color:#000;
    position:relative;
    margin:10px 0 0 0;
    width:980px;
    height:28px;
    float:left;
}

#main-menu ul {
width:980px;
margin:0;
}

#main-menu ul li {
float: left;
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
}

#main-menu ul li a {
display:block;
color:#fff;
text-decoration:none;
line-height:27px;
height:28px;
text-align:center;
}

Upvotes: 0

Views: 2783

Answers (4)

igorilla
igorilla

Reputation: 11

My solution is to add additional empty li elements between menu items just for spacing. This solution works well if the number of horizontal menu items is known in advance. It also allows the first item to touch the left edge of the containing element and last item to touch the right edge. The menu items will not be wrapped or rearranged when window is made smaller.

HTML:

<ul class="tabs">
    <li><a href="#">First Item</a></li><li class="space"></li>
    <li><a href="#">Second</a></li><li class="space"></li>
    <li><a href="#">Bah</a></li><li class="space"></li>
    <li><a href="#">Last one is long</a></li>
</ul>

CSS:

.tabs{
    display:table;
    width:500px;
}
.tabs li{
    display:table-cell;
    white-space: nowrap;
}
.space {
    width: 33%; /* This should be 100 / (nr of elements - 1) */
}

Here is demo: http://jsfiddle.net/LqLE9/

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

A Partial Solution

I have a solution that may be a good start:

#main-menu {
    background-color:#000;
    margin:10px 0 0 0;
    padding: 0;
    width:1080px;
    height:28px;
    float: left;
    overflow: auto;
    text-align: center;
}
.child-menu  {
    margin: 0;
    padding: 0;
    display: inline;
}
.child-menu li {
    display: inline;
    list-style: none;
    margin: 0 5px;
    padding: 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
}
.child-menu a {
    color:#fff;
    text-decoration:none;
}

With a fiddle: http://jsfiddle.net/audetwebdesign/Tp7wH/

Some Design Issues and Questions

If you fix the width of the main-menu, you will see some space on the far left and far right.

When I set the width to 980px, the links wrapped into a second line. You need to think about this.

I display the ul and li elements as inline, but you could also use inline blocks if you want a more button-like look to the menu.

Upvotes: 0

karthipan raj
karthipan raj

Reputation: 667

If less than ie ver 9.0 is not required, then following will be useful:

  1. Flex box property.
  2. 2.ul { display:table; } ul li { display:table-cell; text-align:center }

Upvotes: 1

Gavin Wood
Gavin Wood

Reputation: 1006

don't use float left on the li's rather use display inline-block and *display: inline hack for IE with a zoom: 1; you can then add margins to the li's to keep the spacing the same. center the content with text-align center on the parent element that has a width allocated to it.

Upvotes: 0

Related Questions