我有一个使用MaterialiseCSS制作的导航栏,我想知道如何使底部居中。 这是我的代码:
<nav class="nav-extended">
<div class="nav-wrapper container">
<a href="#!" class="brand-logo center">TEMP LOGO TEXT</a>
<ul class="left hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<ul class="right hide-on-med-and-down">
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="nav-content container">
<ul class="tabs tabs-transparent">
<center>
<li class="tab"><a href="#">Partnerships</a></li>
<li class="tab"><a href="#">Courses</a></li>
<li class="tab"><a href="#">Work Schemes</a></li>
<li class="tab"><a href="#">Lesson Plans</a></li>
<li class="tab"><a href="#">Guidance</a></li>
<li class="tab"><a href="#">Help</a></li>
<li class="tab"><a href="#">Apply</a></li>
</center>
</ul>
</div>
</nav>
答案 0 :(得分:3)
<center>
标签不再支持HTML5,你应该把它拿出来。
使用materialize
中的最新版本并使用以下内容,我可以将这些标签放在中心
.tabs {
display: flex;
justify-content: space-between;
}
Flexbox完整指南
.tabs {
display: flex;
justify-content: space-between;
}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<nav class="nav-extended">
<div class="nav-wrapper container">
<a href="#!" class="brand-logo center">TEMP LOGO TEXT</a>
<ul class="left hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<ul class="right hide-on-med-and-down">
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="nav-content container">
<ul class="tabs tabs-transparent">
<li class="tab"><a href="#">Partnerships</a></li>
<li class="tab"><a href="#">Courses</a></li>
<li class="tab"><a href="#">Work Schemes</a></li>
<li class="tab"><a href="#">Lesson Plans</a></li>
<li class="tab"><a href="#">Guidance</a></li>
<li class="tab"><a href="#">Help</a></li>
<li class="tab"><a href="#">Apply</a></li>
</ul>
</div>
</nav>
答案 1 :(得分:0)
添加此课程: 在UL之前的DIV {/ 1}}