元素边距覆盖整个宽度

Question

我希望我的下拉菜单中的徽标和链接在同一行上可见，而徽标的“边距”（橙色）不会覆盖如下所示的链接。

1. 这是一个使用复选框的纯 CSS 下拉菜单

2. 我已将徽标附加到底部白线。这是设计使然：当菜单下拉时，徽标应该跟随。

3. 目前，决定折叠菜单最大高度的值是选择器

   #navbar-checkbox:checked + .menu ul {
     max-height: 65px;
   }
   

   65px 的唯一原因是为了实际说明问题。 max-height 应该是 35px

这是我的小提琴http://jsfiddle.net/shivashivashiva/cdh8tnvf/1/

Answer 1

这是我能够做到的。

我将徽标设置为向左浮动并将导航的最大高度从 65px 增加到 70px，并在菜单 .li 中添加此 css 代码 vertical-align:top