logo标签列表

如何使用Materialize创建一个居中对齐链接的导航栏？

htmlcssmaterialize
8
我将为您翻译如下内容，涉及IT技术：

我正在尝试使用Materialize构建一个带有顶部导航栏的单页垂直滚动网站。然而，Materialize只提供了将链接左对齐或右对齐的类，标志可以居中对齐，但链接本身无法居中对齐。

我已经将center-align和center类添加到UL和包装器div中，并尝试使用网格布局，但均未成功。以下是我的代码：

HTML

   <div class="navbar-fixed"  >
    <nav id="nav_f" class="transparent z-depth-0" role="navigation" >
        <div class="container">



            <div class="nav-wrapper"  >

             <div class="row s12">

            <div>
                  <ul class="hide-on-med-and-down navbar " >
                      <li><a id="desk-about-us" href="#about-us">ABOUT US</a></li>
                      <li><a href="#how-it-works">HOW IT WORKS</a></li>
                      <li><a href="#comments">COMMENTS</a></li>
                  </ul>
                </div>
              </div>

                <ul id="nav-mobile" class="side-nav side-nav-menu ">
                    <li><a href="#about-us">ABOUT US</a></li>
                    <li><a href="#how-it-works">HOW IT WORKS</a></li>
                    <li><a href="#comments">COMMENTS</a></li>
                </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse right"><i class="material-icons">menu</i></a>
            </div>

       </div>
    </nav>
</div>

我的CSS文件中仅为链接的悬停行为和背景颜色添加下划线。
什么问题？ - Scott
4个回答
17

在所有的 nav ul li 元素中，Materialize 使用了 float: left。如果您尝试使用标准的帮助程序使它们居中，那么它将不起作用。因此，除了 text-align: center 外，您还需要将该 float 设置为 none。然而，这将使您所有的按钮堆叠在一起；为了解决这个问题，只需让 <li> 元素显示为内联元素，并让 <a> 元素显示为内联块元素。

我建议您创建一个新的类，如下所示：

nav.nav-center ul {
    text-align: center;
}
nav.nav-center ul li {
    display: inline;
    float: none;
}
nav.nav-center ul li a {
    display: inline-block;
}

使用标准的Materialize <nav>组件及上方的.nav-center类：

<nav class="nav-center" role="navigation">
    <div class="nav-wrapper container">
        <ul>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
            <li><a href="/help">Help</a></li>
        </ul>
    </div>
</nav>
4
官方答案可能是，导航栏链接应该左对齐或右对齐，以指示其功能，符合Material Design指南的要求：https://material.google.com/layout/structure.html#structure-app-bar。然而，你可以通过一种有点hacky的方式来解决这个问题：
<div class="naxbar-fixed">
    <nav>   
        <div class="brand-logo center">
            <ul>
                <li class="active"><a href="/page1">page1</a></li>
                <li><a href="/page2">page2</a></li>
            </ul>
        </div>
    </nav>
</div>

通过将navbar包装在一个带有brand-logo和center类的div中，您可以欺骗Materialize认为菜单是一个标志，并允许链接居中对齐。我认为这样的菜单在足够小的屏幕上可能会消失，并且可能不会按照您想要的方式运行。您可以使用Materialize选项卡代替：
<div class="naxbar-fixed">
    <nav>
        <div class="white-text">
            <ul class="tabs center" style="width:20em;">
                <li class="tab col s6 active>
                    <a href="/page1">page1a>
                </li>
                <li class="tab col s6">
                    <a href="/page2">page2</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

这样做的好处是每个链接都有相同的宽度，但很可能需要您做一些额外的样式设置，并且如果您关注移动设备，则可能需要更多的工作。
1

所以，我通过在我的 UL 元素中添加以下转换来解决了这个问题：

nav ul{
  transform: translateX(32%);
  webkit-transform: translateX(-32%);
}

由于我的链接占据了屏幕的三分之一，所以变换是将它们向左移动三分之一。

0

当我在导航栏中添加下拉菜单时，将浮动删除并将文本对齐设置为居中并不是最好的解决方案。一些下拉链接被对齐到左侧，一些被对齐到中心。我认为一个简单的解决方案是创建一个类，其中包含display: flex和justify-content: center。我将其放在ul中，并与hide-on-med-and-down类一起使用，以便居中不影响移动菜单按钮的位置。

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, {});
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems, {
        coverTrigger: false
    });
});
.nav-center {
  display:flex;
  justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

<!-- Dropdown Content -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li><a href="#!">three</a></li>
</ul>
<!-- Navbar  -->
<nav>
  <div class="nav-wrapper">
        <ul class="nav-center">
          <li><a href="#">Link</a></li>
          <!-- Dropdown Trigger -->
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
  </div>
</nav>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接