CODEWITHSUNDEEP
htmlcssalignment
Uncle Slug
Uncle Slug

Reputation: 913

Inline elements not aligning

I got these share buttons from simplesharebuttons.com. I added a more button that will eventually be used to unhide less popular social media icons on smaller screens, but it's not lining up with the rest of the buttons and I can't figure out what the problem is.

http://jsfiddle.net/WLSqw/41/

#share-buttons img {
    width: 35px;
    padding-right: 5px;
    display: inline;
}

#more {
    width: 35px;
    margin-right: 5px;
    background: #ccc;
    display: inline-block;
    border-radius: 50%;
    color: white;
    font-size: 1em;
    text-align: center;
    line-height: 35px;
}

Upvotes: 1

Views: 37

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

Actually, being an inline-block element, all you need for your #more is:

vertical-align: top;

DEMO

Upvotes: 1

Josh M
Josh M

Reputation: 992

Add float:left; to the links and that button

JSFiddle

Upvotes: 0

Related Questions