0

很简单的页面。想要使用 inline-display 而不是 float。现在设置了几次,但是,由于某种原因,在此页面上,当我设置徽标 div 的高度时,它会下拉菜单 div。

jsfiddle演示

HTML

<div id="topbar">
<div class="item" id="logo"></div>
<div class="item" id="menu">Menu</div>
</div>

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%;
}

从我这边可能是简单的解决方案或简单的错误,但看不到它。

4

3 回答 3

4

在菜单上使用vertical-align:top它应该看起来不错。为以下内容制作样式#menu

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

这是一个演示

于 2013-06-21T11:13:38.810 回答
0

您应该垂直对齐图像(徽标)。默认情况下,它与默认文本行对齐。

所以,更新你的 CSS 规则

#topbar #logo {
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    width: 30%;
    height: 91px;
    vertical-align: middle;
}

这是更新的小提琴http://jsfiddle.net/tZNw4/29/

于 2013-06-21T11:16:22.843 回答
0

无法理解为什么会发生这种情况,但这里是解决方案 更改显示

#topbar {
width: 100%;
max-width: 1000px;
margin: auto;
display: table;
}

#topbar .item {
line-height: 91px;
display: table-cell;
background-color: #063;
height: 91px;
}
于 2013-06-21T11:28:30.897 回答