HTML / CSS导航栏无效

问题描述 投票：1回答：2

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

  1. 导航栏不会填满整个屏幕。 （我认为这是因为我将它设置为“float：left”但是当我将其设置为“float：center”时，导航栏不再是内联的，而是显示为列表。）
  2. 导航栏中的文本不在其各自的气泡中心。我有一个悬停效果，弹出的图像位于中心，但文字不是。 （我将它设置为“text-align：center”但我认为它与“float：left”有关。

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

Website Bugs

的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;
}
html css hover navbar center
2个回答
0
投票
  1. 导航栏不会填满整个屏幕。

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

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

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

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

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

这将使营养列表项目与营养项目本身一样广泛。

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

这是因为您在导航栏中的padding-right: 60px;标签上设置了a，这会导致它们从中心移位。所以只是评论出来（或删除它）

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

这是我的变化的codepen。

2
投票

最简单的解决方案是移除浮动并使用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.