我做了一个菜单，但我不明白为什么元素之间没有相等的距离，如果你能在图像中看到一些元素是好的但有些不是。 这是菜单: enter image description here
我处理的代码:
HTML:
<body style="background:#F0F0F0">
<div class="nav" >
<ul>
<li><element>⚽ </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;
}
如何解决？
最佳答案
一个原因可能是因为您缺少结尾 </li>在 <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>⚽ </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>我使用 >在 .nav ul > li获得第一级li s 在 ul 中与父级 .nav .如果我使用 .nav ul li它会得到所有的lis在 ul 中，包括看起来像这样的 child :<li><a href="#">Messenger</a></li> .您只需要菜单顶层的空格，这就是我使用 > 的原因. about the >
更好的例子，看起来更均匀的空间:
.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>⚽ </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>您还可以像这样玩转边距:
.nav ul > li {
display: inline-block;
float: left;
margin-left: 20px;
margin-right: 20px;
}
关于html - 菜单 css 元素之间的等效距离，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36239799/