将图像后面的文本推到div的顶部

Question

我有一个div黑条和一个当前位于左边的徽标图像作为此div的第一个子元素。徽标图像的高度大于黑色条的固定高度42，所以它突出（这是一种风格选择）

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

我想将菜单推到黑色区域上方的顶部

我已经尝试了所有可能的浮动组合，显示：内联/内联块，边距顶部，填充顶部等，但无济于事。

有人有解决方案吗？

感谢!!!

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

Answer 2

您可以从黑色标题中获取line-height属性。 然后，您可以将li显示为inline-block并应用填充作为请求。

 #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-block;
     padding:10px 15px 0 0;
 }

请参阅小提琴：http://jsfiddle.net/Jywd3/