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

【问题标题】：Push text following image to top of div将图像后面的文本推送到 div 顶部
【发布时间】：2013-04-20 23:12:59
【问题描述】：

我有一个 div 黑条和一个当前位于左侧的徽标图像，作为该 div 的第一个子元素。标志图像的高度大于黑色条的固定高度 42，因此它会突出（这是一种样式选择）

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

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

我已经尝试了所有可能的浮动组合、显示：inline/inline-block、margin-top、padding-top 等，但无济于事。

有人有解决办法吗？

谢谢！！！

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;

}

【问题讨论】：

标签： css html positioning

【解决方案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;
}

【讨论】：

啊，这是一个很好的解决方案！谢谢。没想到把它应用到标签

【解决方案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/

【讨论】：