Question

我正在尝试在我的网站中实现响应式顶部导航栏。经过几次试验，它仍然无法正常工作，我无法理解我哪里出错了。

你能否告诉我是否有任何错误？

我附在顶部导航栏的脚本下方和响应的脚本。

非常感谢你的帮助。 TURO

    #main_nav {
        background-color: #FFFFFF;
        position: sticky;
        top: 0;
        position: -webkit-sticky;
        margin: collapse;
        border-bottom: 0.2em solid #F8FBF9;
        z-index: 10;
        box-shadow: 0.2em 0.3em 0.8em #E5E4E3;
    }

    #main_nav ul {
        padding: 0;
        margin: 0;
        text-align: center;
    }

    #main_nav ul li {
        display: inline-block;
        width: 19.7%;
    }

    #main_nav ul li a{
        color: #FF0D90;
        padding: 1em 0;
        font-family: Monaco, monospace;
        font-weight: lighter;
        font-size: 1.2em;
        text-decoration: none;
        text-align: center;
        display: inline-block;
        width: 100%;
        }

    #main_nav ul li a:hover {
        color: #5CA3F9;
        background-color: #F8FBF9;
    }



    .sel_nav{
        background-color: #FAFCFB;
    } 


    @media screen and (max-width: 480px) { /* CSS Rules */

        body {
            width: 100%;
            padding: 0;
            margin-right: 0;
            margin-left: 0;
            overflow: scroll;
        }

    #main_nav {
            position: relative;
            margin-right: 0;
            margin-left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
        }

        #main_nav ul {
            width: 19%;
            padding: 1%;
            text-align: center;
            margin: 0;
        }


        #main_nav ul li {
            display: block;
            width: 100%;
            vertical-align: middle;
            text-align: center;
            margin: 0 auto;
            margin-left: 120%;

        }

        #main_nav ul li a {
            display: block;
            text-align: center;
            vertical-align: middle;
            padding: 0.5em 3em 0.2em 1.5em;

        }

Answer 1

尝试下面的代码，它应该工作。您的代码中有一些不必要的width和padding，并且您不需要为每个元素使用display: inline-block;。这是一个更干净的代码：

#main_nav {
  display: inline-block;
  overflow: hidden;
  background-color: #FFFFFF;
  top: 0;
  position: sticky;
  position: -webkit-sticky;
  margin: collapse;
  border-bottom: 0.2em solid #F8FBF9;
  box-shadow: 0.2em 0.3em 0.8em #E5E4E3;
  width: 100%;
}

#main_nav ul {
  list-style-type: none;
  text-align: center;
  display: flex;
  justify-content: space-around;
  padding: 0;
}

#main_nav ul li {
  display: inline-block;
}

#main_nav ul li a {
  color: #FF0D90;
  text-decoration: none;
  font-family: Monaco, monospace;
  font-weight: lighter;
  font-size: 1.2em;
  padding: 1.5em 1.5em;
}

#main_nav ul li a:hover {
  color: #5CA3F9;
  background-color: #F8FBF9;
}

@media screen and (max-width: 480px) {
  #main_nav {
    display: block;
  }
  #main_nav ul {
    display: block;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }
  #main_nav ul li {
    display: block;
  }
  #main_nav ul li a {
    display: inline-block;
    padding: 0.5em 3em;
  }
}

<nav id="main_nav">
  <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="pagina2.html">NATURA</a></li>
    <li><a href="pagina3.html">CITTA'</a></li>
    <li><a href="pagina4.html">IMMAGINI</a></li>
    <li><a href="pagina5.html">CONTATTI</a></li>
  </ul>
</nav>

要测试响应能力，请在JSFiddle进行测试。

响应式导航栏css

1 个答案: