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! (源链)。感谢您的支持!

您可能感兴趣的

使用Vue制作切口盒子组件 今天看到@Chris Coyier刚发的 一篇帖子 ,使用CSS怎么写一个切口盒子(Notched Boxes)?其实这个效果早在@Lea Verou的CSS Secrets一书中有一个专门的小节介...
Multiple div creation / destruction bug with jQuer... I'm having a weird but with a mix of CSS3 /HTML5/Javascript on Webkit browsers (didn't tried a...
Sliding banner 90% HTML+CSS3 10% JS I made a script to slide an image across the screen (in and out) using CSS3 . I couldn't find ...
What Is Gulp? What is Gulp? One description is that Gulp is a task runner. Another would be that it’s a toolkit fo...
Collective #327 Collective #327 June 28, 2017 View All Infinite Scroll v3 * Keyboard-Only Focu...