我正在尝试使用 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
, 你必须设置 float
至 none
.但是,这将使所有按钮堆叠在一起;要解决这个问题,只需使用 <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/