我希望我的链接居中并且按钮仍然有效答案

【问题标题】：I want my links to be centered and the button to still work我希望我的链接居中并且按钮仍然有效
【发布时间】：2023-03-25 08:20:02
【问题描述】：

这是 PHP 中的 HTML，我尝试更改类，并有一次添加 li 和 ul，但这导致代码无法正常工作。我现在在 html 中添加了 Java 脚本，因为我希望它能够工作。它可以工作，但是在我将某些内容更改为 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;

  }

}

我尝试更改浮点数并向首字母缩略词添加一些类，但没有像我想要的那样工作。

【问题讨论】：

标签： php html css media-queries navbar

【解决方案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>

【讨论】：