Question

我正在创建一个带有徽标和CSS菜单的标题。我希望他们都在同一条线上，当我这样做时，我用了

#header img, #header ul{
display:inline-block;
}

当我使用我制作的自定义菜单时，这很好用。但是，我决定使用CSS菜单生成器来设计更好看的菜单。这打破了它，我不确定问题是什么。

JSFiddle

我也注意到在jsFiddle中，链接的悬停颜色不起作用。它在本地工作正常，所以我假设这是一个jsFiddle问题或我忘了上传的东西。但我只是复制并粘贴了整件事，所以我不确定那会是什么。谢谢！

Answer 1

从width: 100%; display: block删除.menu。

/* Generated via www.cssmenubuilder.com */

.menu{margin:0 auto; padding:0; height:30px; background:url('images/topMenuImages.png') repeat-x;}

要将菜单放在底部，请添加以下内容：

#header { position: relative; }

.menu { position: absolute; bottom: 0px; }

Fiddle

Answer 2

Here is JsFiddle

尝试向标题添加填充，将内联块更改为内联并删除宽度：

#header {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:10px;
    width:100%;
}

显示在底部Here is Demo：

#header {
    text-align:center;

    margin-bottom:0px;
    padding-top:150px;
    padding-bottom:10px;
    width:100%;
}
#header img, #header ul{
    display:inline;
}

Answer 3

我无法从您的代码中查看您的图片，所以我不确定您想要的是什么。但我制作了这个简单的代码，使徽标和菜单在同一行，菜单在徽标/标题高度的中间对齐。您可以查看小提琴HERE

.header{
    height: 100px;
    width: 100%;
    display: block;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 8px 0;
    overflow: hidden;
}
.logo{
    display: inline-block;
    float: left;
    padding-left: 15px;
}
.menu{
    float: right;
    list-style: none;
    margin: 0;
    text-align: right;
    line-height: 100px;
    padding-right: 15px;
}
.menu li{
    display: inline;
    margin: 0 10px;
}

如何让我的菜单与我的徽标位于同一行

3 个答案: