將文字下面的圖像推到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（這只是我已經試過許多連擊LAT）

#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/