1

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

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

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

包含图像和 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;

}
4

2 回答 2

5

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;
}
于 2013-04-20T14:30:35.200 回答
3

您可以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/

于 2013-04-20T15:12:59.940 回答