下拉菜单中的徽标未与链接内联

Question

我已经尝试以各种形式提出这个问题 3 天了。我似乎无法隔离问题。

我有一个使用隐藏复选框的下拉菜单。

我已将我的徽标附加到该菜单的底部。

触发时，菜单会向下滚动。徽标随之滚落。

问题是徽标在另一行，在菜单链接下面，因此菜单下拉得太低，与标题冲突。

我希望徽标与菜单一起向下滚动，但在同一行显示链接，从而将打开菜单的高度降低徽标的高度

我尝试了 inline-block、inline 和一百万个其他调整，但都无济于事。

这是fiddlehttp://jsfiddle.net/shivashivashiva/cdh8tnvf/2/

Answer 1

看到这个updated fiddle

我在 .menu 定义（第二个定义）中将 position:absolute 更改为 relative。

.menu {
    position:relative;
}

Answer 2

您应该添加以下内容以将徽标和文本放在同一行：

menu ul {
    float: right;
}

#logo {
    float: left;
}

同样在我的 firefox 版本 35.0.1 中，由于使用

，文本不完全可见

.menu ul{
    overflow:hidden;
}

以及您用于菜单的最大高度。您还应该在那里进行一些调整。 如果您还想调整文本行高以使文本与图像垂直居中，您可以调整 .menu li

的填充

Answer 3

这是你想要的吗？ Fiddle

在菜单中添加一个内部 div，这样每个绝对值都可以相对于它。

它从 ul 中取出#logo，如：

<span id="logo"></span>
<ul>
    <li><a href="#">how it works</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">contact</a></li>
</ul>

然后制作标志： postion:absolute; 底部：0；

使其保持在线上方。