图标不适合一行 - CSS

Question

正如您所看到的，图标和文字非常贴合，并且在第一张图像上排列好。

我不确定如何将它们组合在一起并保持良好对齐，例如图标不得高于文本。

这是我的代码。

 <nav>
     <ul>
         <li><a href="#"><span id="home"></span> Home</a></li>
         <li><a href="#"><span id="notif"></span>Notifications</a></li>
         <li><a href="#"><span id="msg"></span>Messages</a></li>
     </ul>
 </nav>

这里是CSS：

nav{
    display: inline-block;
    width: 30%;
    float: left;
    height: 30px;
    display: inline-block;
    margin-top: -15px;
}

nav ul{
    margin-left: -42px;
}

nav ul li{
    float: left;
    display: inline;
    margin-right: 15px;
    list-style: none;
}

nav ul li a{
    text-decoration: none;
    color: #66757f;
    font-size: 14px;
    font-weight: bold;
}

span{
    margin-right: 4px;
    margin-top: 10px;
}

span#home{
    width: 20px;
    height: 18px;
    background: url('../img/home.png') no-repeat;
    display: inline-block;
}

span#notif{
    width: 20px;
    height: 18px;
    background: url('../img/bell.png') no-repeat;
    display: inline-block;
}

span#msg{
    width: 20px;
    height: 18px;
    background: url('../img/messages.png') no-repeat;
    display: inline-block;
}

Answer 1

nav ul{
    display: flex;
    flex-direction: row;
    margin-left: -42px;
}
nav ul li{
    //float: left;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    list-style: none;

}
span{
    /* margin-right: 4px;
    margin-top: 10px; */ /* Try to remove this */
}

尝试使用display: flex。

Answer 2

就个人而言，我会使用display:flex，但如果您想继续使用当前使用的方法，请尝试将vertical-align: bottom添加到span个ID中。

span#msg, span#notif, span#home {
    vertical-align: bottom;
}