0
Я сделал меню, но я не могу понять, почему нет эквивалентного расстояния между элементами, если вы можете видеть на изображении какой-то элемент, все в порядке, а некоторые нет. Это меню: enter image description hereЭквивалентное расстояние между элементами меню css
И код, который я работал на:
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;
}
Как решить эту проблему?
вы должны работать с flexbox – DanyCode
ID должны быть уникальными ... используйте класс вместо идентификатора для '' navItem'. –
Следите за «HTML», вы используете «ID», а в «CSS» вы используете «КЛАСС» – DanyCode