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;
}
？
フレックスボックスで作業する必要があります – DanyCode
IDはユニークでなければなりません。「navItem」のIDの代わりにクラスを使用してください。 –
"ID"を使用し、 "CSS"では "クラス"を使用する "HTML"を気にしてください。 – DanyCode