Html 菜单css元素之间的等效距离_Html_Css

Html 菜单css元素之间的等效距离

html css

Html 菜单css元素之间的等效距离,html,css,Html,Css,我已经做了一个菜单，但我不明白为什么元素之间没有相等的距离，如果你能在图像中看到一些元素是好的，但一些不是。这是菜单：我所研究的代码是： HTML: 如何解决这个问题一个原因可能是因为您在中缺少一个结束语 .nav{ 背景色：#660099；颜色：白色；高度：20px；边缘顶部：10px；文本对齐：居中； } 美国海军{ 列表样式：无；文本对齐：居中；填充：0； } .导航a{ 显示：块； } 李中伟先生{ 宽度：70px；高度：30px；显示：内联块；字体大小：15

我已经做了一个菜单，但我不明白为什么元素之间没有相等的距离，如果你能在图像中看到一些元素是好的，但一些不是。这是菜单：

我所研究的代码是：

HTML:

如何解决这个问题

一个原因可能是因为您在

中缺少一个结束语

.nav{
背景色：#660099；
颜色：白色；
高度：20px；
边缘顶部：10px；
文本对齐：居中；
}
美国海军{
列表样式：无；
文本对齐：居中；
填充：0；
}
.导航a{
显示：块；
}
李中伟先生{
宽度：70px；
高度：30px；
显示：内联块；
字体大小：15px；
背景色：#FFFFFF；
左侧填充：0；
文本对齐：左对齐；
左边距：10px；
}
李国荣先生{
宽度：70px；
高度：50px；
显示：内联块；
浮动：左；
左边距：1px；
文本对齐：居中；
}
李国荣先生{
位置：绝对位置；
显示：无；
宽度：继承；
}
李海军：悬停{
显示：块；
}
a{
颜色：白色；
}


⚽
















一个原因可能是您在中缺少一个结束

.nav{
背景色：#660099；
颜色：白色；
高度：20px；
边缘顶部：10px；
文本对齐：居中；
}
美国海军{
列表样式：无；
文本对齐：居中；
填充：0；
}
.导航a{
显示：块；
}
李中伟先生{
宽度：70px；
高度：30px；
显示：内联块；
字体大小：15px；
背景色：#FFFFFF；
左侧填充：0；
文本对齐：左对齐；
左边距：10px；
}
李国荣先生{
宽度：70px；
高度：50px；
显示：内联块；
浮动：左；
左边距：1px；
文本对齐：居中；
}
李国荣先生{
位置：绝对位置；
显示：无；
宽度：继承；
}
李海军：悬停{
显示：块；
}
a{
颜色：白色；
}


⚽
















从.nav li
中删除固定宽度：70px
。要使列表项之间的距离相等，可以使用marginright:16px例如。
从.nav li
中删除固定的宽度：70px
。要使列表项之间的距离相等，可以使用marginright:16px例如。
在“HTML”中使用“ID”，在“CSS”中使用“CLASS”
你可以用flexbox来做
.nav{
背景色：#660099；
颜色：白色；
高度：20px；
边缘顶部：10px；
}
美国海军{
列表样式：无；
文本对齐：居中；
填充：0；
边际上限：0px；
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
}
.导航a{
显示：块；
}
李中伟先生{
宽度：70px；
高度：30px；
显示：内联块；
字体大小：15px；
背景色：#FFFFFF；
左侧填充：0；
文本对齐：左对齐；
左边距：10px；
}
李国荣先生{
左边距：10px；
显示：内联块；
浮动：左；
左边距：1px；
文本对齐：居中；
}
李国荣先生{
位置：绝对位置；
显示：无；
宽度：继承；
}
李海军：悬停{
显示：块；
}


和#9917
















注意在“HTML”中使用“ID”，在“CSS”中使用“类”
你可以用flexbox来做
.nav{
背景色：#660099；
颜色：白色；
高度：20px；
边缘顶部：10px；
}
美国海军{
列表样式：无；
文本对齐：居中；
填充：0；
边际上限：0px；
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
}
.导航a{
显示：块；
}
李中伟先生{
宽度：70px；
高度：30px；
显示：内联块；
字体大小：15px；
背景色：#FFFFFF；
左侧填充：0；
文本对齐：左对齐；
左边距：10px；
}
李国荣先生{
左边距：10px；
显示：内联块；
浮动：左；
左边距：1px；
文本对齐：居中；
}
李国荣先生{
位置：绝对位置；
显示：无；
宽度：继承；
}
李海军：悬停{
显示：块；
}


和#9917
















不清楚您是否希望所有列表项的宽度相同，或者它们之间的间距相同……这不是一回事
之间的空格

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
保证金：
<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>

  .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;
     }