CSS: Inline-Display: Using DIV Why do I get space on the 2nd DIV?

综合技术 2018-05-18 阅读原文

Pretty simple page. Want to use inline-display instead of float. Set this up a few times now, but, for some reason on this page it's dropping down the menu div when I set the height of the logo div.

demo at jsfiddle

HTML

CSS

#topbar {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}
#topbar .item {
    line-height: 91px;
    display: inline-block;
    background-color: #063;
}
#topbar #logo {
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    width: 30%;
    height: 91px;
}
#topbar #menu {
    width: 60%;
}

Probably simple solution or simple error from my side but cannot see it.

Use vertical-align:top
on the menu and it should look good. Making your styles for the #menu
the following:

#topbar #menu {
    width: 60%;
    vertical-align: top;
}

Here's a demo

Hello, buddy!

责编内容by:Hello, buddy!阅读原文】。感谢您的支持!

您可能感兴趣的

Height of image depends on text What I'm trying to do is make the background image's height change depending on the amount of text. ex. image height is 100px and the text within ...
Is it possible to type in a CSS border I'm making a website at the moment and i've run into a problem. In my CSS code i have the a border that is left of some social icons. It makes a 50 pi...
Different images – resizing, scaling in a re... I have an image that is of changing sizes (calls a different image from database on every different view). I want to display the image in a respon...
Writing HTML and CSS Do all these big websites "like this one" write html and css manually or they use some automated tool to do it, as I am always struggling with it! T...
Full Sized Background Image on Blogger with Blur E... In this short tutorial you will learn how to add an image as the background of your blog that stretches to all edges thus fills your entire blog's ...