css - 将图像后的文本推送到 div 顶部

Question

我有一个 div 黑条和一个 Logo 图像，该图像当前位于左侧作为该 div 的第一个子元素。 logo图片的高度大于黑条的固定高度42，所以突出了(这是样式选择)

我想在黑色栏中包含一个菜单，所以我添加了一个 UL 菜单作为下一个子元素。 但是，它位于 div 的底部，黑色条区域之外，因为它与 Logo 内嵌。

我想将菜单推到顶部，在黑色区域之上

我尝试了所有可能的 float 组合、显示:内联/内联 block 、边距顶部、填充顶部等，但都无济于事。

谁有解决办法？

谢谢!!!

HTML

<div id="black-bar">
    <a href="..." class="logo"><img src="..."></img></a>

        <ul>
            <li><a href="programs.shtml">Programs & Projects</a></li>
        <li><a href="recipes.shtml">Recipes</a></li>
        </ul>
</div>

CSS(这只是我尝试过的许多组合中的一个)

 #black-bar {
    text-align: left;
    background: #373737;
    height: 43px;
    padding-left: 60px;
    width: 100%;
    line-height: 119px; 
}

#black-bar .logo {
    float: left;
    margin-left: 0px;
    }


/* header menu */

#black-bar ul{
    line-height: 119px;
    display: inline;
    vertical-align: top;
}


#black-bar ul li{
    display: inline;

}

Answer 1

JSfiddle

CSS

#black-bar {
    text-align: left;
    background: #373737;
    height: 43px;
    padding-left: 60px;
    width: 100%;
    line-height: 119px;
}
#black-bar .logo {
    float: left;
    margin-left: 0px;
}
/* header menu */
 #black-bar ul {
    display: inline;
}
#black-bar ul li {
    display: inline;
}

#black-bar ul li a {
    vertical-align: top;
    line-height: 40px;
    color: white;
    text-decoration: none;
}