时间戳

首页 > 解决方案 > 列表中的链接标题呈现在导航栏中的链接下方

html - 列表中的链接标题呈现在导航栏中的链接下方

问题描述

我正在参加介绍视频课程，在多次将我的代码与讲师进行比较后，我的 html 和 css 对我的导航栏按钮的呈现方式有所不同。使用 Chrome 作为我的浏览器，我在不同的 VScode 窗口中运行他们的代码，并且链接标题按应有的方式显示在链接中，但我不知道为什么我没有。我玩过不同的填充值和浮点值，但没有成功。我不知道我哪里出错了。显然，现在有了 flexbox 和 Grid，这些方法不再是最佳实践，但我们还没有达到这些方法，因此本练习使用浮点数。我有一半觉得我应该忽略这个问题并在我们介绍了更新的方法后重新审视，但这让我很恼火，因为我无法弄清楚为什么我不能将我的链接图块放在你点击的链接的公园的中心。

我一直在走各种兔子洞，但都没有运气，希望有更多经验的人能从中脱颖而出。任何见解将不胜感激。

请在下面查看我的代码：

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;
}

标签： htmlcss

解决方案

将文本移动到相应的<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>

推荐阅读