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!阅读原文】。感谢您的支持!

您可能感兴趣的

IBM全球首席资讯安全架构师Chenta Lee 携认知安全重磅回归CSS2017... 六年前,Watson(IBM认知计算系统的杰出代表)在美国最受欢迎的智力节目《危险边缘》上一举打败两位节目年度总冠军,让认知计算走进了全球人们的视野。认知计算代表着一种全新的计算模式,通过自然语言处理和机器学习等技术创新,助力决策者从大量...
Bombproof HTML/CSS Email Button A bombproof button that works on everything, even lotus notes… I’ve been coding at ActionRocket now for almost 6 mon...
JavaScript 中的 CSS:基于组件的样式的未来... 我们通过采用内联式 CSS 样式,可以获得 Javascript 中所有编程支持,它的好处就像 CSS 预处理器(变量、混入和函数)一样,而且也能解决 CSS 中的很多问题,比如全局命名空间和样式冲突。 为了深入探索 ...
Weekly News for Designers № 402 This is our popular weekly design news post where we share our favorite design related articles, resources and freebies ...
Why do my CSS styles go beyond my online styles&am... My inline width/height is being overridden by my input styles. Is there a way to correct this? Or will the in...