我正在参加一个介绍视频课程，在多次将我的代码与讲师进行比较后，我的导航栏按钮的html和css呈现方式不同。使用Chrome作为浏览器，我在不同的VScode窗口中运行他们的代码，链接标题会显示在链接中，但我不明白为什么我的没有。我玩过不同的填充值和浮点值，但都没有成功。我不知道哪里出了问题。显然，现在有了flexbox和Grid，这些方法就不再是最佳实践了，但我们还没有达到这些目的，所以本练习使用了float。我有点觉得我应该忽略这个问题，在我们介绍了新的方法后重新访问，但这让我很恼火，因为我无法弄清楚为什么我不能让我的链接瓦片集中在你点击的链接的公园里。
我一直在经历各种各样的兔子洞，但运气不佳，希望有什么能让更有经验的人脱颖而出。如有任何见解，我们将不胜感激。
请参阅下面的代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="welcome to the most extraordinary hotel in Boston Massachusetts">
<meta name="keywords" content="hotel,boston hotel, new england hotel">
<link rel="stylesheet" href="css/style.css">
<title>Hotel BT | Welcome</title>
</head>
<body>
<header>
<nav id="navbar">
<div class="container">
<h1 class="logo">
<a href="index.html">HBT</a>
</h1>
<ul>
<li><a class="current" href="index.html"></a>Home</li>
<li><a href="about.html"></a>About</li>
<li><a href="contact.html"></a>Contact</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
css
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main styling: anything that doesn't have a id or class i.e., body links h , p ...etc. */
html,body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.7em;
}
a {
color: #333;
text-decoration: none;
}
h1, h2, h3 {
padding-bottom: 20px;
}
p {
margin: 10px 0;
}
/* Utility Classes */
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 0 20px;
}
/* navbar */
#navbar {
background: #333;
color: #fff;
overflow: auto;
}
#navbar a {
color: #fff;
}
/* after learning flexbox/grid... dont float things like this */
#navbar h1 {
float: left;
padding-top: 20px;
}
#navbar ul {
list-style: none;
float: right;
}
#navbar ul li {
float: left;
}
#navbar ul li a {
display: block;
padding: 20px;
text-align: center;
}
#navbar ul li a:hover,
#navbar ul li a.current {
background: #444;
color: #f7c08a;
}
将文本移动到相应的<a>标记中。
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main styling: anything that doesn't have a id or class i.e., body links h , p ...etc. */
html,body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.7em;
}
a {
color: #333;
text-decoration: none;
}
h1, h2, h3 {
padding-bottom: 20px;
}
p {
margin: 10px 0;
}
/* Utility Classes */
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 0 20px;
}
/* navbar */
#navbar {
background: #333;
color: #fff;
overflow: auto;
}
#navbar a {
color: #fff;
}
/* after learning flexbox/grid... dont float things like this */
#navbar h1 {
float: left;
padding-top: 20px;
}
#navbar ul {
list-style: none;
float: right;
}
#navbar ul li {
float: left;
}
#navbar ul li a {
display: block;
padding: 20px;
text-align: center;
}
#navbar ul li a:hover,
#navbar ul li a.current {
background: #444;
color: #f7c08a;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="welcome to the most extraordinary hotel in Boston Massachusetts">
<meta name="keywords" content="hotel,boston hotel, new england hotel">
<link rel="stylesheet" href="css/style.css">
<title>Hotel BT | Welcome</title>
</head>
<body>
<header>
<nav id="navbar">
<div class="container">
<h1 class="logo">
<a href="index.html">HBT</a>
</h1>
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>