html - 为什么我的有填充我没有应用？

Question

我想创建一个分为两部分的导航栏，一侧有条形图标，另一侧有公司名称。我在 20% 处声明了图标，在 80% 处声明了名称，但这些不对齐。在网络检查器上，图标似乎在其右侧应用了填充，如下所示：

但填充不适用于 name ：

这是HTML：

<div class="smallHeader">
    <div class="menuBars">
        <span class="fas fa-bars"></span>
    </div>

    <div class="title">
        <i class="fas fa-microphone-alt"></i>
        <span>{{ config('app.name', 'OnAirCasts') }}</span>
    </div>

    <div class="clearFix"></div>
</div>

这是CSS：

/*--- Small Nav bar ---*/
.smallHeader{
    width: 100%;
}

.menuBars {
    width: 20%;
    text-align: center;
}

.title {
    width: 80%;
    float: left;
    text-align: center;
}

为什么要添加此填充？

标签： htmlcss

Answer 1

.smallHeader{
    width: 100%;
    display: flex;
}