HTML/CSS 导航栏不工作

Question

我是 HTML 和 CSS 的新手。我正在做一个辅助项目来帮助我练习。在 gif 中，您可以看到我的导航栏存在一些问题。

导航栏没有填满整个屏幕。

(I think this is because I have it set to "float: left" but when I set it to "float: center" the navbar is no longer inline but displayed as a list.)
导航栏中的文本不在各自气泡的中心。我有一个悬停效果，弹出的图片在中间，但文字不是。

(I have it set to "text-align: center" but I think it has something to do with the "float: left".

我已附上我的 html 和 css 文件。

Test.html

<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
    <header id="main-header">
        <div class="container">
            <h1>Test</h1>
        </div>
    </header>

    <nav id="navbar">
        <!--<div class="container">-->
            <ul>
                <li class="home-icon"><a href="#">Home</a></li>
                <li class="rout-icon"><a href="#">Routines</a></li>
                <li class="nutr-icon"><a href="#">Nutrition</a>
                    <ul>
                        <li><a href="#">Meals</a></li>
                        <li><a href="#">Diet Plans</a></li>
                        <li><a href="#">Calorie Tracking</a></li>
                    </ul>
                </li>
                <li class="abou-icon"><a href="#">About</a></li>
                <li class="cont-icon"><a href="#">Contact</a></li>
            </ul>
        <!--</div>-->
    </nav>

    <footer id="main-footer">
        <p>Copyright &copy; 2017 Test</p>
    </footer>

</body>
</html>

Test.css

body {
    line-height: 1.6em;
    margin: 0;
    background-color: #fefefe;
    font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

@font-face {
    font-family: "Saturday Sans ICG Bold";
    src: url("Fonts/Saturday Sans ICG Bold.tff");
    src: url("Fonts/saturday_sans_icg_bold-webfont.woff");
}

#main-header {
    color: #000;
    margin-top: 20px;
    text-align: center;
    font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
}

#navbar a {
    color: #A9A9A9;
    text-decoration: none;
    padding-right: 60px;
}

#navbar ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#navbar ul li {
    float: left;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: aliceblue;
    border-top: 2px #f4f4f4 solid;
    border-bottom: 2px #f4f4f4 solid;
    border-radius: 15px;
    margin-bottom: 1px;
}

#navbar ul li a {
    display: block;
}

#navbar ul li ul li {
    display: none;
}

#navbar ul li:hover ul li {
    display: block;
}

#navbar ul li ul li:hover {
    opacity: .3;
}

/* Hover Picture */
#navbar li.home-icon:hover {
    background-image: url("Images/home_icon2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.home-icon > a:hover {
    opacity: 0;
}

#navbar li.rout-icon:hover {
    background-image: url("Images/dumbbell.jpg");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.rout-icon > a:hover {
    opacity: 0;
}

#navbar li.nutr-icon:hover {
    background-image: url("Images/fruit.png");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.nutr-icon > a:hover {
    opacity: 0;
}

#navbar li.abou-icon:hover {
    background-image: url("Images/about_icon.png");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.abou-icon > a:hover {
    opacity: 0;
}

#navbar li.cont-icon:hover {
    background-image: url("Images/contact_icon.png");
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

#navbar li.cont-icon > a:hover {
    opacity: 0;
}

#main-footer {
    text-align: center;
    font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
    font-size: 10px;
    padding: 20px;
    margin-top: 250px;
}

Answer 1

最简单的解决方案是删除浮动并将其更改为 display:inline-block 然后在导航上使用 text-align:center。

body {
  line-height: 1.6em;
  margin: 0;
  background-color: #fefefe;
  font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

@font-face {
  font-family: "Saturday Sans ICG Bold";
  src: url("Fonts/Saturday Sans ICG Bold.tff");
  src: url("Fonts/saturday_sans_icg_bold-webfont.woff");
}

#main-header {
  color: #000;
  margin-top: 20px;
  text-align: center;
  font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}

#navbar a {
  color: #A9A9A9;
  text-decoration: none;
  padding-right: 60px;
}

#navbar ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  text-align:center;
}

#navbar ul li {
  display:inline-block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: aliceblue;
  border-top: 2px #f4f4f4 solid;
  border-bottom: 2px #f4f4f4 solid;
  border-radius: 15px;
  margin-bottom: 1px;
  position:relative;
}

#navbar ul li a {
  display: block;
}

#navbar ul li ul {
  display: none;
  position:absolute;
}

#navbar ul li:hover ul {
  display: block;
}

#navbar ul li ul li:hover {
  opacity: .3;
}


/* Hover Picture */

#navbar li.home-icon:hover {
  background-image: url("Images/home_icon2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#navbar li.home-icon>a:hover {
  opacity: 0;
}

#navbar li.rout-icon:hover {
  background-image: url("Images/dumbbell.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#navbar li.rout-icon>a:hover {
  opacity: 0;
}

#navbar li.nutr-icon:hover {
  background-image: url("Images/fruit.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#navbar li.nutr-icon>a:hover {
  opacity: 0;
}

#navbar li.abou-icon:hover {
  background-image: url("Images/about_icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#navbar li.abou-icon>a:hover {
  opacity: 0;
}

#navbar li.cont-icon:hover {
  background-image: url("Images/contact_icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#navbar li.cont-icon>a:hover {
  opacity: 0;
}

#main-footer {
  text-align: center;
  font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
  font-size: 10px;
  padding: 20px;
  margin-top: 250px;
}

<header id="main-header">
    <div class="container">
      <h1>Test</h1>
    </div>
  </header>

  <nav id="navbar">
    <!--<div class="container">-->
    <ul>
      <li class="home-icon"><a href="#">Home</a></li>
      <li class="rout-icon"><a href="#">Routines</a></li>
      <li class="nutr-icon"><a href="#">Nutrition</a>
        <ul>
          <li><a href="#">Meals</a></li>
          <li><a href="#">Diet Plans</a></li>
          <li><a href="#">Calorie Tracking</a></li>
        </ul>
      </li>
      <li class="abou-icon"><a href="#">About</a></li>
      <li class="cont-icon"><a href="#">Contact</a></li>
    </ul>
    <!--</div>-->
  </nav>

  <footer id="main-footer">
    <p>Copyright &copy; 2017 Test</p>
  </footer>

或者你可以像这样使用 flex :

body {
  line-height: 1.6em;
  margin: 0;
  background-color: #fefefe;
  font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

@font-face {
  font-family: "Saturday Sans ICG Bold";
  src: url("Fonts/Saturday Sans ICG Bold.tff");
  src: url("Fonts/saturday_sans_icg_bold-webfont.woff");
}

#main-header {
  color: #000;
  margin-top: 20px;
  text-align: center;
  font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}

#navbar a {
  color: #A9A9A9;
  text-decoration: none;
  padding-right: 60px;
}

#navbar ul {
  margin: 0px;
  padding: 0px;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

#navbar ul li {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: aliceblue;
  border-top: 2px #f4f4f4 solid;
  border-bottom: 2px #f4f4f4 solid;
  border-radius: 15px;
  margin-bottom: 1px;
}

#navbar ul li a {
  display: block;
}

#navbar ul li ul li {
  display: none;
}

#navbar ul li:hover ul li {
  display: block;
}

#navbar ul li ul li:hover {
  opacity: .3;
}


/* Hover Picture */

#navbar li.home-icon:hover {
  background-image: url("Images/home_icon2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#navbar li.home-icon>a:hover {
  opacity: 0;
}

#navbar li.rout-icon:hover {
  background-image: url("Images/dumbbell.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#navbar li.rout-icon>a:hover {
  opacity: 0;
}

#navbar li.nutr-icon:hover {
  background-image: url("Images/fruit.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#navbar li.nutr-icon>a:hover {
  opacity: 0;
}

#navbar li.abou-icon:hover {
  background-image: url("Images/about_icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#navbar li.abou-icon>a:hover {
  opacity: 0;
}

#navbar li.cont-icon:hover {
  background-image: url("Images/contact_icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#navbar li.cont-icon>a:hover {
  opacity: 0;
}

#main-footer {
  text-align: center;
  font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
  font-size: 10px;
  padding: 20px;
  margin-top: 250px;
}

<header id="main-header">
    <div class="container">
      <h1>Test</h1>
    </div>
  </header>

  <nav id="navbar">
    <!--<div class="container">-->
    <ul>
      <li class="home-icon"><a href="#">Home</a></li>
      <li class="rout-icon"><a href="#">Routines</a></li>
      <li class="nutr-icon"><a href="#">Nutrition</a>
        <ul>
          <li><a href="#">Meals</a></li>
          <li><a href="#">Diet Plans</a></li>
          <li><a href="#">Calorie Tracking</a></li>
        </ul>
      </li>
      <li class="abou-icon"><a href="#">About</a></li>
      <li class="cont-icon"><a href="#">Contact</a></li>
    </ul>
    <!--</div>-->
  </nav>

  <footer id="main-footer">
    <p>Copyright &copy; 2017 Test</p>
  </footer>

Answer 2

The navbar does not fill up the whole screen.

这是因为您为导航栏列表项设置了固定宽度width: 200px;。

所以要让它填满屏幕宽度（假设您总是有五个项目），您可以这样做：(100% / 5 = 20%)

#navbar ul li {
    width: 20%;
    /* The rest of your styles */
}

尽管这也会影响营养列表项的宽度，因此您可以专门为它们添加样式：

#navbar .nutr-icon li {
    width: 100%;
}

这将使营养列表项与营养项本身一样宽。

The text in the navbar isn't in the center of their respective bubbles.

这是因为您在导航栏的 a 标签上设置了 padding-right: 60px;，这会导致它们偏离中心。所以只需注释掉（或删除它）

#navbar a {
    color: #A9A9A9;
    text-decoration: none;
    /*padding-right: 60px;*/
}

这是我的 codepen 更改。

HTML/CSS 导航栏不工作

HTML/CSS navbar not working

html

css

center

hover

navbar