我正在學(xué)習(xí) html css，現(xiàn)在我想創(chuàng)建導(dǎo)航欄作為我的任務(wù)。因此，當(dāng)我嘗試創(chuàng)建水平導(dǎo)航欄時(shí)，我的菜單沒(méi)有顯示在導(dǎo)航欄 div 的中心？為什么它與頂角相連？我希望它們從頂部和底部居中，這是我的代碼，糾正我的錯(cuò)誤* { margin: 0; padding: 0;}nav { background-color: red;}ul { list-style: none; height: 35px; background-color: purple; width: 50%;}nav ul li { display: inline; padding: 10px; margin-top: 10px;}nav ul li a { text-decoration: none; color: black;}nav ul li:hover { background-color: blue;}<nav> <ul> <li> <a href="">Home</a></li> <li> <a href="">About Us</a></li> <li> <a href="">Contact Us</a></li> <li> <a href="">Privacy Policy</a></li> </ul></nav>
3 回答
倚天杖
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊
這是您可以執(zhí)行的操作，flex如果需要，您可以使用和調(diào)整您的代碼。
body {
margin: 0;
padding: 0;
justify-content: center;
text-align: center;
display: flex;
}
nav {
background-color: red;
}
ul {
justify-content: center;
text-align: center;
list-style: none;
height: 35px;
background-color: purple;
width: 50%;
display: flex;
flex-direction: row;
}
ul li {
margin-top: 10px;
}
ul li a {
text-decoration: none;
color: black;
padding: 5px;
}
ul li:hover {
background-color: blue;
}
<ul>
<li> <a href="">Home</a></li>
<li> <a href="">About Us</a></li>
<li> <a href="">Contact Us</a></li>
<li> <a href="">Privacy Policy</a></li>
</ul>
ABOUTYOU
TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊
我向 li 和 ul添加了display:inline-block ，向 nav添加了 text-align:center 。這將成為利潤(rùn)最高的作品。
* {
margin: 0;
padding: 0;
}
nav {
text-align: center
}
ul {
list-style: none;
height: 35px;
background-color: purple;
width: 50%;
display: inline-block
}
nav ul li {
display: inline-block;
padding: 10px;
}
nav ul li a {
text-decoration: none;
color: black;
}
nav ul li:hover {
background-color: blue;
}
<nav>
<ul>
<li> <a href="">Home</a></li>
<li> <a href="">About Us</a></li>
<li> <a href="">Contact Us</a></li>
<li> <a href="">Privacy Policy</a></li>
</ul>
</nav>
- 3 回答
- 0 關(guān)注
- 166 瀏覽
添加回答
舉報(bào)
0/150
提交
取消