Javascript 单击响应导航按钮时文本未对齐_Javascript_Html_Css

Javascript 单击响应导航按钮时文本未对齐

javascript html css

Javascript 单击响应导航按钮时文本未对齐,javascript,html,css,Javascript,Html,Css,我正在测试W3Schools提供的响应式顶部导航示例，我对内部样式表做了一个小的修改，这样文本Home将移动到菜单的中心，当我单击导航按钮时，它将不对齐为什么会发生这种情况，如何解决身体{ 保证金：0； } ul.topnav{ 文本对齐：居中；列表样式类型：无；保证金：0；填充：0；溢出：隐藏；背景色：#333； } ul.topnav li{ 显示：内联块；文本对齐：居中； } ul.topnav li a{ 显示：内联块；颜色：#F2F2；文本对齐：居中；文字装饰

我正在测试W3Schools提供的响应式顶部导航示例，我对内部样式表做了一个小的修改，这样文本

Home

将移动到菜单的中心，当我单击导航按钮时，它将不对齐

为什么会发生这种情况，如何解决


身体{
保证金：0；
}
ul.topnav{
文本对齐：居中；
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
ul.topnav li{
显示：内联块；
文本对齐：居中；
}
ul.topnav li a{
显示：内联块；
颜色：#F2F2；
文本对齐：居中；
文字装饰：无；
过渡：0.3s；
填充：14px 16px；
字号：17px；
}
ul.topnav李a：悬停{
背景色：#555；
}
ul.topnav li.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav li：不是（第一个孩子）{
显示：无；
}
ul.topnav li.icon{
浮动：对；
显示：内联块；
}
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav.responsive{
位置：相对位置；
}
ul.topnav.responsive li.icon{
位置：绝对位置；
右：0；
排名：0；
}
ul.topnav.li{
浮动：无；
显示：内联；
}
ul.topnav.lia{
显示：块；
文本对齐：居中；
}
}












响应式Topnav示例
调整浏览器窗口的大小以查看其工作方式
函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

正如我在评论中所说，问题是因为您的

li.icon

在

位置：相对

到

位置：绝对

您必须将其固定到

位置：绝对


身体{
保证金：0；
}
ul.topnav{
文本对齐：居中；
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
ul.topnav li{
显示：内联块；
文本对齐：居中；
}
ul.topnav li a{
显示：内联块；
颜色：#F2F2；
文本对齐：居中；
文字装饰：无；
过渡：0.3s；
填充：14px 16px；
字号：17px；
}
ul.topnav李a：悬停{
背景色：#555；
}
ul.topnav li.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav li：不是（第一个孩子）{
显示：无；
}
ul.topnav li.icon{
显示：内联块；
位置：绝对位置；
右：0；
}
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav.responsive{
位置：相对位置；
}
ul.topnav.responsive li.icon{
位置：绝对位置；
右：0；
排名：0；
}
ul.topnav.li{
浮动：无；
显示：内联；
}
ul.topnav.lia{
显示：块；
文本对齐：居中；
}
}












响应式Topnav示例
调整浏览器窗口的大小以查看其工作方式
函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

正如我在评论中所说，问题是因为您的

li.icon

在

位置：相对

到

位置：绝对

您必须将其固定到

位置：绝对


身体{
保证金：0；
}
ul.topnav{
文本对齐：居中；
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
ul.topnav li{
显示：内联块；
文本对齐：居中；
}
ul.topnav li a{
显示：内联块；
颜色：#F2F2；
文本对齐：居中；
文字装饰：无；
过渡：0.3s；
填充：14px 16px；
字号：17px；
}
ul.topnav李a：悬停{
背景色：#555；
}
ul.topnav li.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav li：不是（第一个孩子）{
显示：无；
}
ul.topnav li.icon{
显示：内联块；
位置：绝对位置；
右：0；
}
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav.responsive{
位置：相对位置；
}
ul.topnav.responsive li.icon{
位置：绝对位置；
右：0；
排名：0；
}
ul.topnav.li{
浮动：无；
显示：内联；
}
ul.topnav.lia{
显示：块；
文本对齐：居中；
}
}












响应式Topnav示例
调整浏览器窗口的大小以查看其工作方式
函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
    }
    ul.topnav {
      text-align: center;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }
    ul.topnav li {
      display: inline-block;
      text-align: center;
    }
    ul.topnav li a {
      display: inline-block;
      color: #f2f2f2;
      text-align: center;
      text-decoration: none;
      transition: 0.3s;
      padding: 14px 16px;
      font-size: 17px;
    }
    ul.topnav li a:hover {
      background-color: #555;
    }
    ul.topnav li.icon {
      display: none;
    }
    @media screen and (max-width: 680px) {
      ul.topnav li:not(:first-child) {
        display: none;
      }
      ul.topnav li.icon {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
      }
    }
    @media screen and (max-width: 680px) {
      ul.topnav.responsive {
        position: relative;
      }

      ul.topnav.responsive li {
        float: none;
        display: inline;
      }
      ul.topnav.responsive li a {
        display: block;
        text-align: center;
      }
    }
  </style>
</head>

<body>

  <ul class="topnav" id="myTopnav">
    <li><a class="active" href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
    <li class="icon">
      <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
    </li>
  </ul>

  <div style="padding-left:16px">
    <h2>Responsive Topnav Example</h2>
    <p>Resize the browser window to see how it works.</p>
  </div>

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

</body>


</html>