Equivalent distance between elements of a menu css

Question

I have done a menu but I can't understand why there is no equivalent distance between the elements, if you can see in the image some of the element are okay but some are not. This is the menu: enter image description here

And the code I worked on:

HTML:

<body style="background:#F0F0F0">
   <div class="nav" >
     <ul>
        <li><element>&#9917 </element> </li>
        <li><a href="#" id="navItem"> Home </a></li> 
        <li><a href="#" id="navItem"> Mail </a></li>
        <li><a href="#" id="navItem"> Team </a></li>  
        <li><a href="#" id="navItem"> Matches </a></li> 
        <li><a href="#" id="navItem"> Club </a></li>
        <li><a href="#" id="navItem"> Multimedia </a></li> 
        <li><a href="#" id="navItem"> Fans </a></li>
        <li><a href="#" id="navItem"> Shop </a><li>
        <li><a href="#" id="navItem"> More </a>
          <ul>
            <li><a href="#">Messenger</a></li>
            <li><a href="#">Games</a></li> 
            <li><a href="#">Facebook</a></li>            
         </ul>
      </li>
   </ul>
  </div>
</body>

CSS:

  .nav{
        background-color:#660099;
        color:white; 
        height:20px;
        margin-top: 10px;
        text-align: center;
      }
    .nav ul {
        list-style: none;
        text-align: center;
        padding:0;

     }

    .nav a {
        display: block;
     }
    .nav li li{
        width: 70px;
        height: 30px;
        display: inline-block;
        font-size: 15px;
        background-color: #FFFFFF;
        padding-left: 0;
        text-align: left;
        margin-left: 10px;
        }

    .nav li {
        width: 70px;
        height: 50px;
        display: inline-block;
        float: left;
        margin-left: 1px;
        text-align: center;

     }
     .nav li ul {
        position: absolute;
        display: none;
        width: inherit;
     }

     .nav li:hover ul {
        display: block;
     }

How to resolve this?

ID's must be unique...use a class instead of an ID for the `'navItem`. — Paulie_D, Mar 26 '16 at 19:29
watch out in the "HTML" you use "ID" and in the "CSS" you use "CLASS" — CodeWeis, Mar 26 '16 at 19:41
Can you explain me please where did I use "ID" in html. The nav has class property and the same in css — Bogdan Tomoiaga, Mar 26 '16 at 20:36
id="navItem" `id` is the `ID` they are referring to. You shouldn't have more than one ID with the same name. you could use class like : `class="navItem"` instead .. It would be better. — jack blank, Mar 26 '16 at 20:55

score 0 · Accepted Answer · edited May 23 '17 at 12:07

One reason might because you're missing a closing </li> in <li><a href="#" id="navItem"> Shop </a><li>

.nav{
  background-color:#660099;
  color:white; 
  height:20px;
  margin-top: 10px;
  text-align: center;
}
.nav ul {
  list-style: none;
  text-align: center;
  padding:0;

}

.nav a {
  display: block;
}
.nav li li{
  width: 70px;
  height: 30px;
  display: inline-block;
  font-size: 15px;
  background-color: #FFFFFF;
  padding-left: 0;
  text-align: left;
  margin-left: 10px;
}

.nav li {
  width: 70px;
  height: 50px;
  display: inline-block;
  float: left;
  margin-left: 1px;
  text-align: center;

}
.nav li ul {
  position: absolute;
  display: none;
  width: inherit;
}

.nav li:hover ul {
  display: block;
}
a{
  color:white;
}

 <div class="nav" >
 <ul>
 <li><element>&#9917 </element> </li>
 <li><a href="#" id="navItem"> Home </a></li> 
 <li><a href="#" id="navItem"> Mail </a></li>
 <li><a href="#" id="navItem"> Team </a></li>  
 <li><a href="#" id="navItem"> Matches </a></li> 
 <li><a href="#" id="navItem"> Club </a></li>
 <li><a href="#" id="navItem"> Multimedia </a></li> 
 <li><a href="#" id="navItem"> Fans </a></li>
 <li><a href="#" id="navItem"> Shop </a></li> 
 <li><a href="#" id="navItem"> More </a>
    <ul>
       <li><a href="#">Messenger</a></li>
       <li><a href="#">Games</a></li> 
       <li><a href="#">Facebook</a></li>           
    </ul>
 </li>
 </ul>
 </div>

I use > in .nav ul > li to get the first level of lis in the ul with the parent .nav. If I used .nav ul li it would get all the lis in the ul including the children that look like these: <li><a href="#">Messenger</a></li>. You just wanted the spaces on the top level of the menu that's why I used > . about the >

Better example that looks like more even spaces:

.nav{
  background-color:#660099;
  color:white; 
  height:20px;
  margin-top: 10px;
  text-align: center;
}
.nav ul {
  list-style: none;
  text-align: center;
  padding:0;

}

.nav a {
  /*display: block;*/
  text-align: center;
  color:white;
}
.nav li li{
  width: 70px;
  /*height: 30px;*/
  display: inline-block;
  font-size: 15px;
  background-color: #FFFFFF;
  padding-left: 0;
  /*text-align: left;*/
  /*margin-left: 10px;*/
}

.nav ul > li {
  display: inline-block;
  float: left;
  margin-left: 10px;

}
.nav li ul {
  position: absolute;
  display: none;
  width: inherit;
}

.nav li:hover ul {
  display: block;
}

 <div class="nav" >
 <ul>
 <li><element>&#9917 </element> </li>
 <li><a href="#" id="navItem"> Home </a></li> 
 <li><a href="#" id="navItem"> Mail </a></li>
 <li><a href="#" id="navItem"> Team </a></li>  
 <li><a href="#" id="navItem"> Matches </a></li> 
 <li><a href="#" id="navItem"> Club </a></li>
 <li><a href="#" id="navItem"> Multimedia </a></li> 
 <li><a href="#" id="navItem"> Fans </a></li>
 <li><a href="#" id="navItem"> Shop </a></li> 
 <li><a href="#" id="navItem"> More </a>
    <ul>
       <li><a href="#">Messenger</a></li>
       <li><a href="#">Games</a></li> 
       <li><a href="#">Facebook</a></li>           
    </ul>
 </li>
 </ul>
 </div>

You can also play around with the margin like:

  .nav ul > li {
      display: inline-block;
      float: left;
      margin-left: 20px;
      margin-right: 20px;

   }

score 0 · Answer 2 · answered Mar 26 '16 at 19:37

0

Remove fixed width: 70px from .nav li. To achieve equal distance between the list items, you could use margin-right: 16px; for example.

answered Mar 26 '16 at 19:37

Nora

3,093
2
20
22

Thank you, but how can you know how to apply in order to really work? I mean I've tried a lot of things for almost 2 hours and no results. How can I figure out how to use in order to work? – Bogdan Tomoiaga Mar 26 '16 at 20:40

score 0 · Answer 3 · answered Mar 26 '16 at 19:40

watch out in the "HTML" you use "ID" and in the "CSS" you use "CLASS"

you can do it with flexbox

.nav{
            background-color:#660099;
            color:white; 
            height:20px;
            margin-top: 10px;
    
          }
         
        .nav ul {
            list-style: none;
            text-align: center;
            padding:0;
            margin-top: 0px;
             display:flex;
      flex-direction:row;
      justify-content: space-around;

         }

        .nav a {
            display: block;
         }
        .nav li li{
            width: 70px;
            height: 30px;
            display: inline-block;
            font-size: 15px;
            background-color: #FFFFFF;
            padding-left: 0;
            text-align: left;
            margin-left: 10px;
            }

        .nav li {
            margin-left:10px;
            display: inline-block;
            float: left;
            margin-left: 1px;
            text-align: center;

         }
         .nav li ul {
            position: absolute;
            display: none;
            width: inherit;
         }

         .nav li:hover ul {
            display: block;
         }

<body style="background:#F0F0F0">
   <div class="nav" >
   <ul>
   <li class="test"><element>&#9917 </element> </li>
    
   <li><a href="#" class="navItem"> Home </a></li> 
   <li><a href="#" class="navItem"> Mail </a></li>
   <li><a href="#" class="navItem"> Team </a></li>  
   <li><a href="#" class="navItem"> Matches </a></li> 
   <li><a href="#" class="navItem"> Club </a></li>
   <li><a href="#" class="navItem"> Multimedia </a></li> 
   <li><a href="#" class="navItem"> Fans </a></li>
   <li><a href="#" class="navItem"> Shop </a><li> 
   <li><a href="#" class="navItem"> More </a>
      <ul>
         <li><a href="#">Messenger</a></li>
         <li><a href="#">Games</a></li> 
         <li><a href="#">Facebook</a></li>           
      </ul>
      </li>
     
   </ul>
   </div>

score 0 · Answer 4 · answered Mar 26 '16 at 19:41

It's not clear if you want all the list items the same width or the space between them to be the same...it's not the same thing.

Space between

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0px;
  padding: 0;
}
.nav {
  background-color: #660099;
  color: white;
  height: 20px;
  margin-top: 50px;
  text-align: center;
}
.nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.nav a {
  display: block;
  color: white;
  text-decoration: none;
  background: darkorange;
}
.nav li {
  height: 50px;
  text-align: center;
}

<body style="background:#F0F0F0">
  <div class="nav">
    <ul>


      <li><a href="#" class="navItem"> Logo </a>
      </li>

      <li><a href="#" class="navItem"> Home </a>
      </li>
      <li><a href="#" class="navItem"> Mail </a>
      </li>
      <li><a href="#" class="navItem"> Team </a>
      </li>
      <li><a href="#" class="navItem"> Matches </a>
      </li>
      <li><a href="#" class="navItem"> Club </a>
      </li>
      <li><a href="#" class="navItem"> Multimedia </a>
      </li>
      <li><a href="#" class="navItem"> Fans </a>
      </li>
      <li><a href="#" class="navItem"> Shop </a>
      </li>
      <li><a href="#" class="navItem"> More </a> 
      </li>
    </ul>
  </div>

All same size:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0px;
  padding: 0;
}
.nav {
  background-color: #660099;
  color: white;
  margin-top: 50px;
  text-align: center;
}
.nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.nav a {
  display: block;
  color: white;
  height: 20px;
  text-decoration: none;
  background: darkorange;
}
.nav li {
  text-align: center;
  flex: 1;
  border: 1px solid red;
}

<body style="background:#F0F0F0">
  <div class="nav">
    <ul>


      <li><a href="#" class="navItem"> Logo </a>
      </li>

      <li><a href="#" class="navItem"> Home </a>
      </li>
      <li><a href="#" class="navItem"> Mail </a>
      </li>
      <li><a href="#" class="navItem"> Team </a>
      </li>
      <li><a href="#" class="navItem"> Matches </a>
      </li>
      <li><a href="#" class="navItem"> Club </a>
      </li>
      <li><a href="#" class="navItem"> Multimedia </a>
      </li>
      <li><a href="#" class="navItem"> Fans </a>
      </li>
      <li><a href="#" class="navItem"> Shop </a>
      </li>
      <li><a href="#" class="navItem"> More </a> 
      </li>
    </ul>
  </div>

Equivalent distance between elements of a menu css

4 Answers4