CODEWITHSUNDEEP
htmlcss
user8492975
user8492975

Reputation:

Icons doesn't fit in one line - CSS

I was trying to mimic this design here

As you can see the icon and the text are perfectly fit and lined up well on the first image.

However for some reason my code doesn't line them well

I am not sure how can I make them fit together and aligned well such as the icon must not be higher than the text.

Here's my code doing that.

 <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>

Here's the 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;
}

Upvotes: 0

Views: 616

Answers (2)

Scott Brown
Scott Brown

Reputation: 334

Personally, I would use display:flex but if you'd like to continue with the method you're currently using, try adding vertical-align: bottom to your span id's.

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

Upvotes: 1

kyun
kyun

Reputation: 10264

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 */
}

Try to using display: flex.

Upvotes: 2

Related Questions