Question

我的css代码如下： -

    #nav {
      position: relative;
      display: block;

      margin: 0;
      background: #333;
      z-index: 1;
      border-bottom: 1px solid #666;
      font-weight: 600;
      font-family: helvetica, arial, sans-serif;
      font-size: 14px;
      -webkit-box-align: center;
      -webkit-box-pack: center;
      display: -webkit-box;
    }
#desktop-nav .nav-item {
  display: block;
  padding: 0 20px;
  float: right;
  -webkit-transition: color 200ms linear;

  transition: color 200ms linear;
}

#desktop-nav .nav-item:hover, #desktop-nav .nav-item:active {
  opacity: 0.7;
}

和html代码是： -

<div id="nav">
               <nav id="desktop-nav">
            <a class="nav-item" href="#1">Github</a>
            <a class="nav-item" href="#2">About</a>
            <a class="nav-item" href="#3">Community</a>
            <a class="nav-item" href="#4">Docs</a>
        </nav>

在这里，我使用以下代码将make center作为导航菜单..

 -webkit-box-align: center;
      -webkit-box-pack: center;
      display: -webkit-box;

但是它正在谷歌chrome ..但不是在firefox ..我需要跨浏览器兼容的代码为mozilla ????

Answer 1

有多种方法可以执行此操作，您可以将div text-align : center CSS属性提供给我，也可以将其设置为div：

-webkit-box-align: center;
-webkit-box-pack: center;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;`

中心导航菜单的Css代码在Firefox中不起作用

1 个答案: