我剛剛開始學習 HTML 和 CSS，我正在嘗試為網站設定選單格式
我不明白為什么選單中的橙色框（當滑鼠懸停在元素上時）頂部有一個缺口
這是我的代碼：
.navbar ul{
float:right;
list-style: none;
height: inherit;
line-height: 25px;
padding: 15px;
}
.navbar ul li{
display: inline-block;
}
.navbar ul li a{
display:block;
text-align:center;
min-width: 120px;
padding: 0 70px 20px;
}
.navbar ul li a:hover{
background-color: orange;
}
這就是我想要做的
這是 HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Information</title>
<link href = "style.css" rel = "stylesheet">
</head>
<body>
<nav class= "navbar">
<a href="info.html" class = "nav-logo">Theme Park</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Tickets</a></li>
</ul>
</nav>
<main>
<div class="content">
<h1>Plan Your Visit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed. Duis aute irure dolor in reprehenderit.</p>
<button class="btns">More</button>
<button class="btns">Buy Now</button>
</div>
<div>
<img src="photo1.jpeg">
</div>
</main>
</body>
</html>
uj5u.com熱心網友回復：
設定padding和margin為ulto0和 apply 適當padding的a（或li）元素。這樣導航項 ( a) 將與它們的ul容器一樣高，它們的背景顏色會延伸到整個高度。
（我在 中添加了背景顏色以ul使其更明顯）
html, body {
margin: 0;
}
.navbar ul {
float: right;
list-style: none;
height: inherit;
line-height: 25px;
padding: 0;
margin: 0;
background: #ddd;
}
.navbar ul li {
display: inline-block;
}
.navbar ul li a {
display: block;
text-align: center;
min-width: 120px;
padding: 20px;
}
.navbar ul li a:hover {
background-color: orange;
}
.content {
clear: both;
}<nav class="navbar">
<a href="info.html" class="nav-logo">Theme Park</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Tickets</a></li>
</ul>
</nav>
<main>
<div class="content">
<h1>Plan Your Visit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed. Duis aute irure dolor in reprehenderit.</p>
<button class="btns">More</button>
<button class="btns">Buy Now</button>
</div>
<div>
<img src="photo1.jpeg">
</div>
</main>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/377797.html