我怎样才能创建一个导航栏与中心对齐链接使用Materialise？ [英] How can i create a navbar with center aligned links using Materialize?

问题描述

我正在尝试使用物化功能在顶部创建一个带有导航栏的1页垂直滚动网站，现在，物化只有类可以将链接对齐到左侧或右侧，徽标可以居中对齐，但不是链接本身，

我一直在向UL和一个包装div添加中心对齐和中心类，并且尝试使用网格而没有成功，下面是我的代码：

HTML

 < div class =navbar-fixed > 
< nav id =nav_fclass =transparent z-depth-0role =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-ushref =＃about-us>关于我们< / a>< / li> 
< li>< a href =＃how-it-works>它是如何运作的< / a>< / li> 
< li>< a href =＃comments>评论< / a>< / li> 
< / ul> 
< / div> 
< / div> 
 
< ul id =nav-mobileclass =side-nav side-nav-menu> 
< li>< a href =＃about-us>关于我们< / a>< / li> 
< li>< a href =＃how-it-works>它是如何运作的< / a>< / li> 
< li>< a href =＃comments>评论< / a>< / li> 
< / ul> 
< a href =＃data-activates =nav-mobileclass =button-collapse right>< i class =material-icons> menu< / i>< / A> 
< / div> 
 
< / div> 
< / nav> 
< / div> 
  

在我的css中，链接和背景颜色的悬停行为只有一个下划线，

解决方案

Materialize在所有<$ c $上都有一个 float：left c> nav ul li 元素。如果您尝试将它们置于标准助手中，它将无法使用。因此，除了 text-align：center 之外，您必须将 float 设置为无。但是，这将使所有的按钮堆叠在一起;为了解决这个问题，只需将< 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> code>组件与 .nav-center 上面的类：

 < nav class =nav-centerrole =navigation> 
< div class =nav-wrapper container> 
< ul> 
< li>< a href =/ about>关于< / a>< / li> 
< li>< a href =/ contact>联络人< / a>< / li> 
< li>< a href =/ help>帮助< / a>< / li> 
< / ul> 
< / div> 
< / nav> 
  




I am trying to build a 1 page vertical scrolling website with a navbar at the top using materialize, now, materialize only has classes to align the links either left or right, a logo can be center aligned but not the links themselves,

I've been adding center-align, and center classes to the UL and a wrapper div, and also, tried using the grid without success, here is my code:

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>

On my css there is only an underline for the hovering behavior of the links and the background color,

解决方案

Materialize comes with a float: left on all nav ul li elements. If you try to center them with the standard Helper, it won't work. So, in addition to text-align: center, you'll have to set that float to none. However, that will make all of your buttons stack atop each other; to solve that, simply have the <li> elements display inline and the <a> elements display inline-block.

I suggest creating a new class as such:

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;
}

Use the standard Materialize <nav> component with the .nav-center class above:

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

这篇关于我怎样才能创建一个导航栏与中心对齐链接使用Materialise？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！