html - 我如何使用 Materialize 创建一个带有居中对齐链接的导航栏?

标签 html css materialize

我正在尝试使用 materialize 构建一个顶部带有导航栏的 1 页垂直滚动网站,现在,materialize 仅具有将链接左对齐或右对齐的类, Logo 可以居中对齐但链接本身不能居中对齐,

我一直在向 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 上,链接的悬停行为和背景色只有下划线,

最佳答案

Materialize 带有 float: left在所有nav ul li元素。如果您尝试将它们与标准 Helper 居中, 它不会起作用。所以,除了text-align: center , 你必须设置 floatnone .但是,这将使所有按钮堆叠在一起;要解决这个问题,只需使用 <li>元素显示内联和 <a>元素显示内联 block 。

我建议这样创建一个新类:

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

使用标准 Materialise <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>

关于html - 我如何使用 Materialize 创建一个带有居中对齐链接的导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38964113/

相关文章:

html - Css "transform: scale()"使元素在容器外生长

javascript - 单击然后取消单击 jquery 按钮不起作用

javascript - margin-top 在 Internet Explorer 中工作但不在谷歌浏览器中工作

javascript - 模态弹出窗口无法正常工作(希望背景页面变暗)

HTML/CSS 元素不随网页调整大小

PHP - 在指定时间禁用按钮

html - 使用 Bootstrap 对齐表单中的字段

css - 如何在 Materialise css 中堆叠按钮?

css - Materialise:向调色板添加颜色?

css - 字体很棒的图标没有出现在 Materialize css progress/determinate 之上