내 링크를 중앙에 배치하고 버튼을 계속 작동 시키길 원합니다.

이것은 PHP의 HTML입니다. 클래스와 li 및 ul을 추가하기 위해 한 번 변경하려고했지만 코드가 작동하지 않게되었습니다. 내가 자바 스크립트를 html로 추가 한 이유는 그것이 작동하기를 원했기 때문이다. 그것은 작동하지만 난 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; 

    } 

}

나는 플로트를 변경하고 약어에 몇 가지 클래스를 추가하려고 노력하지만 내가 원하는처럼 작동하지 않았다.

출처

2017-11-05 Bogdan

어떻게 this-

<!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>

에 대한

출처

2017-11-05 23:17:54

내 링크를 중앙에 배치하고 버튼을 계속 작동 시키길 원합니다.

답변

관련 문제