Question

这是PHP中的HTML，我试图更改类，一次添加li和ul，但这使代码无法正常工作。我现在在html中添加了Java Script，因为我想让它工作。它可以工作，但是在我将某些内容更改为topnav类之后，它就不再起作用了：

    <div class="container">
          <h3></h3>

<div class="topnav" id="myTopnav">

  <?=$_SERVER['PHP_SELF']=='/index.php'?'class="current"':'';?><a href="/../../index.php">&bull; Home</a>
            <?=$_SERVER['PHP_SELF']=='/about.php'?'class="current"':'';?><a href="/../../about.php">About</a>
            <?=$_SERVER['PHP_SELF']=='/gallerylist.php'?'class="current"':'';?><a href="/../../gallerylist.php">Gallery</a>
            <?=$_SERVER['PHP_SELF']=='/contact.php'?'class="current"':'';?><a href="/../../contact.php">Contact &bull;</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>        

</div>

这是响应式导航栏的CSS。媒体查询我认为是问题，但我不确定：

.topnav {
  overflow: hidden;
  background-color: #ce8c4e;
  border-bottom:  #63451e 1px solid;

}

.topnav a {
  float: left;

  color: black;

  padding: 10px 12px;
  text-decoration: none;
  font-size: 14px;


}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;

}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;

  }

}

我试图更改浮点数并在缩略词中添加一些类但是没有像我想要的那样工作。

Answer 1

这个怎么样 -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .topnav {
          overflow: hidden;
          background-color: #ce8c4e;
          border-bottom:  #63451e 1px solid;

        }

        .topnav a {
          float: left;

          color: black;

          padding: 10px 12px;
          text-decoration: none;
          font-size: 14px;


        }

        .topnav a:hover {
          background-color: #ddd;
          color: black;
        }

        .topnav .icon {
          display: none;

        }

        .topnav-container {
            width: fit-content;
            margin: 0 auto;
        }

        @media screen and (max-width: 600px) {
          .topnav a:not(:first-child) {display: none;}
          .topnav a.icon {
            float: right;
            display: block;
          }
        }

        @media screen and (max-width: 600px) {
          .topnav.responsive {position: relative;}
          .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
          }
          .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;

          }

          .topnav-container {
            width: auto;
          }
        }
    </style>
</head>
<body>

    <div class="container">
        <h3></h3>

        <div class="topnav" id="myTopnav">
            <div class="topnav-container">
              <?=$_SERVER['PHP_SELF']=='/index.php'?'class="current"':'';?><a href="/../../index.php">&bull; Home</a>
                        <?=$_SERVER['PHP_SELF']=='/about.php'?'class="current"':'';?><a href="/../../about.php">About</a>
                        <?=$_SERVER['PHP_SELF']=='/gallerylist.php'?'class="current"':'';?><a href="/../../gallerylist.php">Gallery</a>
                        <?=$_SERVER['PHP_SELF']=='/contact.php'?'class="current"':'';?><a href="/../../contact.php">Contact &bull;</a>
              <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
            </div>
        </div>

        <script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
        </script>        

    </div>

</body>
</html>

我希望我的链接居中，按钮仍然可以工作

1 个答案: