我怎样才能将这个第二个导航栏放在marerializecss中心?

时间:2017-06-14 20:14:15

标签: html css

我有一个使用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>

以下是目前的图片。 (我尝试使用它不起作用的标签) Current result

2 个答案:

答案 0 :(得分:3)

<center>标签不再支持HTML5,你应该把它拿出来。

使用materialize中的最新版本并使用以下内容,我可以将这些标签放在中心

.tabs {
  display: flex;
  justify-content: space-between;
}
  

Flexbox完整指南

     

参考:https://css-tricks.com/snippets/css/a-guide-to-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}}