我正在學習 html css，現在我想創建導航欄作為我的任務。因此，當我嘗試創建水平導航欄時，我的菜單沒有顯示在導航欄 div 的中心？為什么它與頂角相連？我希望它們從頂部和底部居中，這是我的代碼，糾正我的錯誤* { 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貢獻1828條經驗 獲得超3個贊
這是您可以執行的操作，flex如果需要，您可以使用和調整您的代碼。
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貢獻1812條經驗 獲得超5個贊
我向 li 和 ul添加了display:inline-block ，向 nav添加了 text-align:center 。這將成為利潤最高的作品。
* {
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 關注
- 144 瀏覽
添加回答
舉報
0/150
提交
取消