HTML/CSS 导航栏不工作

Posted

技术标签:

【中文标题】HTML/CSS 导航栏不工作【英文标题】：HTML/CSS navbar not working 【发布时间】：2018-06-11 05:52:05 【问题描述】：

我对 html 和 CSS 还很陌生。我正在做一个辅助项目来帮助我练习。在 gif 中，您可以看到我的导航栏存在一些问题。

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

    （我认为这是因为我将其设置为“float: left”，但是当我将其设置为“float: center”时，导航栏不再是内联的，而是显示为列表。）

    导航栏中的文本不在其各自气泡的中心。我有悬停效果，弹出的图片在中间，但文字不在。

    （我将其设置为“text-align: center”，但我认为它与“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;

【问题讨论】：

【参考方案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>

【讨论】：

【参考方案2】：

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

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

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

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

虽然这也会影响营养列表项的宽度，所以您可以专门为它们添加样式：

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

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

    导航栏中的文本不在各自气泡的中心。

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

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

这是我的更改的codepen。

【讨论】：

navbar width will always be 1000px 你确定吗？我建议至少运行代码并查看。这根本不是真的，我们有块元素，块元素总是占用 100% 的宽度。这里我们有浮动问题。 @TemaniAfif 我确实运行了代码并看到了。你可以看到我的解决方案在我链接的codepen 中有效，尽管它可能不是最好的解决方案。 我不是在谈论您的解决方案或您的代码.. 我在谈论您的解释是错误的而不是逻辑：This is because you've set a fixed width for you navbar list items width: 200px;, which means the navbar width will always be 1000px (as it has five items). HTML/CSS 不能以这种方式工作 我已经检查过了，如果屏幕可以容纳它，它确实会保持1000px 宽，否则它会将它分成两行（就像在您的解决方案中一样）。 对我来说，如果解释错误/不清楚，这很重要......一个可行的解决方案不仅仅是意图。主要目的是提供良好的解释，以便任何看到您的答案的人都能理解。但是，如果解释是错误的并且解决方案是有效的，那就不好了，因为我们可能会以错误的信息结束，尤其是对于新编码员。

以上是关于HTML/CSS 导航栏不工作的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 导航栏不工作 laravel 刀片

UISearchController 搜索栏不隐藏导航栏

隐藏导航栏不起作用

导航栏不出现

导航栏不可见

ios 7状态栏不继承导航栏颜色