小编cne*_*ans的帖子

我一直在尝试使用带有3个链接的MaterialiseCSS进行某种导航,每个链接的宽度为33%,我希望将文本置于链接中心(甚至是图标)

如果我没有放左或右类,文本和图标不会保持在同一行...但是如果我把左类放到图标然后它浮动到左边,因此假设导航栏是宽度:100%,图标和文字之间的空间太大.

这是HTML

<div id="secondary-navbar"><nav>
  <div class="nav-wrapper">
    <ul>
      <li>
        <a href="#!">
          <i class="material-icons left">event</i>Calendario
        </a>
      </li>
      <li>
        <a href="#!">
          <i class="material-icons left">location_on</i>Mapa
        </a>
      </li>
      <li>
        <a href="#!">
          <i class="material-icons left">apps</i>Galería
        </a>
      </li>
    </ul>
  </div>
</nav></div>

和CSS

#secondary-navbar nav
{
    background:#ffffff;
}
#secondary-navbar nav .nav-wrapper ul li a
{
    font-size:1.2em;
}
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
    font-size:1.2em;
    margin-right:0.2em;
}
#secondary-navbar nav .nav-wrapper ul li a,
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
    color:#06207d;
}

#secondary-navbar nav .nav-wrapper …