弹性框菜单对齐问题

Question

一直在研究和调整以下代码，但以均匀间距对齐文本却让我困惑。我可以使用表格元素轻松完成此任务，但我想掌握 Flex Box 方法。任何帮助表示赞赏。文本对齐问题的屏幕截图：#navbar-menu-button-mobile,#navbar-container-mobile {    display: flex !important;}/* === Navigation Drop-down Menu === */#navbar-container-mobile {    margin-top: 74px;    padding: 0 1%;    background: white;}.navbar-menu-item-mobile {    display: flex;    flex-direction: row;    align-items: center;    justify-content: flex-start;}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /><div id="navbar-container-mobile" class="container">    <div id="navbar-collapse-mobile" class="collapse w-100">        <div class="navbar-menu-item-mobile">            <div class="fa fa-calendar"></div><div class="pr-2"></div><div>Calendar</div>        </div>        <div class="navbar-menu-item-mobile">            <div class="fa fa-compass"></div><div class="pr-2"></div><div>Locations</div>        </div>        <div class="navbar-menu-item-mobile">            <div class="fa fa-heartbeat"></div><div class="pr-2"></div><div>Physicians</div>        </div>        <div class="navbar-menu-item-mobile">            <div class="fa fa-random"></div><div class="pr-2"></div><div>Trades</div>        </div>        <div class="navbar-menu-item-mobile">            <div class="fa fa-user"></div><div class="pr-2"></div><div>Personal</div>        </div>        <div class="navbar-menu-item-mobile">            <div class="fa fa-cog"></div><div class="pr-2"></div><div>Settings</div>        </div>        <div class="dropdown-divider"></div>        <div class="navbar-menu-item-mobile">            <div class="fa fa-sign-out"></div><div class="pr-2"></div><div>Sign Out</div>        </div>    </div></div>

Answer 1

下面的示例假设您使用的是 FontAweosme v4，请遵循此标记：

<div class="navbar-menu-item-mobile">

   <i class="menu icons"></i>

   <div>Menu label</div>

</div>

您需要设置图标的宽度、边距：

.navbar-menu-item-mobile .fa {

  width: 15px;

  margin-right: 10px;

}

例子：

#navbar-menu-button-mobile,

#navbar-container-mobile {

  display: flex !important;

}

/* Add this */

.navbar-menu-item-mobile .fa {

  width: 15px;

  margin-right: 10px;

}

/* === Navigation Drop-down Menu === */

#navbar-container-mobile {

  margin-top: 74px;

  padding: 0 1%;

  background: white;

}

.navbar-menu-item-mobile {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: flex-start;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="navbar-container-mobile" class="container">

  <!-- Removed collapse class for testing -->

  <div id="navbar-collapse-mobile" class="w-100">

    <div class="navbar-menu-item-mobile">

      <i class="fa fa-calendar"></i>

      <div>Calendar</div>

    </div>

    <div class="navbar-menu-item-mobile">

      <i class="fa fa-compass"></i>

      <div>Locations</div>

    </div>

    <div class="navbar-menu-item-mobile">

      <i class="fa fa-heartbeat"></i>

      <div>Physicians</div>

    </div>

    <div class="navbar-menu-item-mobile">

      <i class="fa fa-random"></i>

      <div>Trades</div>

    </div>

    <div class="navbar-menu-item-mobile">

      <i class="fa fa-user"></i>

      <div>Personal</div>

    </div>

    <div class="navbar-menu-item-mobile">

      <div class="fa fa-cog"></div>

      <div>Settings</div>

    </div>

    <div class="dropdown-divider"></div>

    <div class="navbar-menu-item-mobile">

      <i class="fa fa-sign-out "></i>

      <div>Sign Out</div>

    </div>

  </div>

</div>

Answer 2

你需要min-width给你的图标添加一个