如何制作materializecss中心导航栏?

时间:2016-12-04 15:17:25

标签: html css html5 materialize

我想使用materializecss

在导航栏上创建菜单中心

我的HTML代码:

<div class="navbar-utility theme">
  <ul class="right">
    <li>
      <a href="#" id="navbar-search-trigger">
        <i class="material-icons">search</i>
      </a>
     </li>

    <li>
      <a href="#" id="navbar-full-screen">
        <i class="fa fa-arrows-alt tiny"></i>
      </a>
    </li>

    <li>
      <a class="dropdown-button" href="#!" data-activates="dropdown1">
        Dropdown
        <i class="material-icons right">arrow_drop_down</i>
      </a>
     </li>
  </ul>
</div>

我的CSS代码如下:

.navbar-utility{
  -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
 -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
  box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
  width: 100%;
  position: fixed;
  top: 64px;
  text-align: center;
}

.navbar-utility ul.right{

  float: left;
  clear: both;
  margin:0px auto;
  text-align:center;
}

但这似乎不起作用。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

您只需尝试此代码..

.cloneNode()