导航链接占用整个宽度

Question

我需要在导航中放置一个图标。我正在使用 mdbootstrap 。如果我未放置任何图标，则导航将正确对齐，如下所示：

但是当我放置图像时，链接不再对齐。

我认为添加图像的原因是navlink像检查器一样占据整个空间：

这是我的代码：

<mdb-navbar
    SideClass="navbar navbar-expand-lg  scrolling-navbar class z-depth-0"
  >
    <mdb-navbar-brand>
      <a class="navbar-brand" [routerLink]="['']">
        <img
          src="../../../assets/imgs/Autosweep-Logo-portrait-hi-res-1.jpg"
          height="100"
          class="d-inline-block align-top"
          alt=""
        />
      </a>
    </mdb-navbar-brand>
    <links class="mt-4" style="margin-left: 50px;">
      <ul class="nav justify-content-center">
        <li class="nav-item size-fonts">
          <a
            class="nav-link waves-light"
            mdbWavesEffect
            [routerLink]="['subscribe-now']"
            routerLinkActive="active">
              <img src="../../../assets/imgs/icons/Subscribe 2.png" style="width: 7%; height: 7%;"/>
            <br>
            Subscribe Now
          </a>
        </li>
        <li class="nav-item size-fonts">
          <a
            class="nav-link waves-light"
            mdbWavesEffect
            [routerLink]="['forms']"
            routerLinkActive="active"
            >
            Forms</a
          >
        </li>
        <li class="nav-item size-fonts">
          <a
            href="https:www.autosweeprfidapps.com/balanceinquiry"
            class="nav-link waves-light"
            mdbWavesEffect
            >Balance Inquiry</a
          >
        </li>
        <li class="nav-item size-fonts">
          <a
            class="nav-link waves-light"
            mdbWavesEffect
            [routerLink]="['reloading']"
            routerLinkActive="active"
            >Stations & Reloading Partners</a
          >
        </li>
        <li class="nav-item size-fonts">
          <a
            class="nav-link waves-light"
            mdbWavesEffect
            [routerLink]="['ada-enrollment']"
            routerLinkActive="active"
            >ADA Re-Activation</a
          >
        </li>
        <li class="nav-item size-fonts">
          <a
            class="nav-link waves-light"
            mdbWavesEffect
            [routerLink]="['events']"
            routerLinkActive="active"
            >Events</a
          >
        </li>
         <li class="nav-item size-fonts">
          <a
            class="nav-link waves-light"
            mdbWavesEffect
            [routerLink]="['customer-care']"
            routerLinkActive="active"
            >Customer Care</a
          >
        </li>
      </ul>
    </links>
  </mdb-navbar>

Answer 1

取出<br>使其看起来像这样

    [routerLink]="['subscribe-now']"
    routerLinkActive="active">
      <img src="../../../assets/imgs/icons/Subscribe 2.png" style="width: 7%; height: 7%;"/>
    Subscribe Now
  </a>
</li>