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

Question

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

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

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

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

问题是徽标位于菜单链接下方的另一行，因此菜单下降得太低，与标题冲突。

我希望徽标随菜单滚动，但在同一行显示链接，从而通过徽标的高度降低打开菜单的高度

我尝试了inline-block，inline以及其他一百万次调整，但无济于事。

这里是小提琴http://jsfiddle.net/shivashivashiva/cdh8tnvf/2/

Answer 1

请参阅此updated fiddle

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

.menu {
    position:relative;
}

Answer 2

这是你想要的吗？ Fiddle

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

它需要#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>

然后制作徽标：     现在的位置是：绝对的;     底部：0;

将它保持在线上方。

Answer 3

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

menu ul {
    float: right;
}

#logo {
    float: left;
}

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

，文本并不完全可见

.menu ul{
    overflow:hidden;
}

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