弹性框菜单对齐问题

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">&nbsp; &nbsp;<i class="menu icons"></i>&nbsp; &nbsp;<div>Menu label</div></div>您需要设置图标的宽度、边距：.navbar-menu-item-mobile .fa {&nbsp; width: 15px;&nbsp; margin-right: 10px;}例子：#navbar-menu-button-mobile,#navbar-container-mobile {&nbsp; display: flex !important;}/* Add this */.navbar-menu-item-mobile .fa {&nbsp; width: 15px;&nbsp; margin-right: 10px;}/* === Navigation Drop-down Menu === */#navbar-container-mobile {&nbsp; margin-top: 74px;&nbsp; padding: 0 1%;&nbsp; background: white;}.navbar-menu-item-mobile {&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; align-items: center;&nbsp; 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">&nbsp; <!-- Removed collapse class for testing -->&nbsp; <div id="navbar-collapse-mobile" class="w-100">&nbsp; &nbsp; <div class="navbar-menu-item-mobile">&nbsp; &nbsp; &nbsp; <i class="fa fa-calendar"></i>&nbsp; &nbsp; &nbsp; <div>Calendar</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="navbar-menu-item-mobile">&nbsp; &nbsp; &nbsp; <i class="fa fa-compass"></i>&nbsp; &nbsp; &nbsp; <div>Locations</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="navbar-menu-item-mobile">&nbsp; &nbsp; &nbsp; <i class="fa fa-heartbeat"></i>&nbsp; &nbsp; &nbsp; <div>Physicians</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="navbar-menu-item-mobile">&nbsp; &nbsp; &nbsp; <i class="fa fa-random"></i>&nbsp; &nbsp; &nbsp; <div>Trades</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="navbar-menu-item-mobile">&nbsp; &nbsp; &nbsp; <i class="fa fa-user"></i>&nbsp; &nbsp; &nbsp; <div>Personal</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="navbar-menu-item-mobile">&nbsp; &nbsp; &nbsp; <div class="fa fa-cog"></div>&nbsp; &nbsp; &nbsp; <div>Settings</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="dropdown-divider"></div>&nbsp; &nbsp; <div class="navbar-menu-item-mobile">&nbsp; &nbsp; &nbsp; <i class="fa fa-sign-out "></i>&nbsp; &nbsp; &nbsp; <div>Sign Out</div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

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