Android 悬停时的导航栏间隙

我正在开发cordova android应用程序，我正在尝试制作导航栏，我已经创建了它，但还有一个缺口。我不知道这个差距是从哪里来的，我想消除这个差距

这是我的HTML：

<nav class="fixed-nav">
        <ul>
            <li><a href="#"><img src="image/cofee.png" height="30" class="menu-icon"/>Cofee</a></li>
            <li><a href="#"><img src="image/koki.png" height="30" class="menu-icon"/>Restaurant</a></li>
            <li><a href="#"><img src="image/beer.png" height="30" class="menu-icon"/>Drinks & Nightlife</a></li>
        </ul>
    </nav>

---

在中，固定导航更改填充值

padding: 10px;

到

试试下面的代码

。固定导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
背景色：#ddd；
空白：nowrap；
高度：50px；
框大小：边框框；
填充：10px 0px；
盒影：0px 3px 6px rgba（0,0,0,0.16），0px 3px 6px rgba（0,0,0,0.23）；
}
.固定导航ul，
.固定导航李{
显示：内联；
}
.固定导航a{
文字装饰：无；
文本转换：大写；
填充：17px 10px；
颜色：#333；
字体系列：arial；
}
.固定导航a:悬停{
背景色：#000；
颜色：#eee；
}
.固定导航{
填充：0；
}
.固定导航img{
垂直对齐：中间对齐；
}
.菜单图标{
右边距：5px；
}
主要{
边缘顶部：55px；
}

在中。固定导航更改填充值

padding: 10px;

到

试试下面的代码

。固定导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
背景色：#ddd；
空白：nowrap；
高度：50px；
框大小：边框框；
填充：10px 0px；
盒影：0px 3px 6px rgba（0,0,0,0.16），0px 3px 6px rgba（0,0,0,0.23）；
}
.固定导航ul，
.固定导航李{
显示：内联；
}
.固定导航a{
文字装饰：无；
文本转换：大写；
填充：17px 10px；
颜色：#333；
字体系列：arial；
}
.固定导航a:悬停{
背景色：#000；
颜色：#eee；
}
.固定导航{
填充：0；
}
.固定导航img{
垂直对齐：中间对齐；
}
.菜单图标{
右边距：5px；
}
主要{
边缘顶部：55px；
}

您已给

固定导航

一个

10px的填充。移除左侧的填充以解决问题

另一种布局方法是使用


。固定导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
背景色：#ddd；
空白：nowrap；
高度：50px；
框大小：边框框；
盒影：0px 3px 6px rgba（0,0,0,0.16），0px 3px 6px rgba（0,0,0,0.23）；
}
.固定导航ul，
.固定导航李，
.固定导航a{
显示器：flex；
}
.固定导航{
高度：50px；
保证金：0；
}
.固定导航a{
文字装饰：无；
文本转换：大写；
颜色：#333；
字体系列：arial；
对齐项目：居中；
填充：0 10px；
}
.固定导航a:悬停{
背景色：#000；
颜色：#eee；
}
.固定导航{
填充：0；
}
.固定导航img{
垂直对齐：中间对齐；
}
.菜单图标{
右边距：5px；
}
主要{
边缘顶部：55px；
}









您已给
固定导航
一个
10px的填充。移除左侧的填充以解决问题

另一种布局方法是使用


。固定导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
背景色：#ddd；
空白：nowrap；
高度：50px；
框大小：边框框；
盒影：0px 3px 6px rgba（0,0,0,0.16），0px 3px 6px rgba（0,0,0,0.23）；
}
.固定导航ul，
.固定导航李，
.固定导航a{
显示器：flex；
}
.固定导航{
高度：50px；
保证金：0；
}
.固定导航a{
文字装饰：无；
文本转换：大写；
颜色：#333；
字体系列：arial；
对齐项目：居中；
填充：0 10px；
}
.固定导航a:悬停{
背景色：#000；
颜色：#eee；
}
.固定导航{
填充：0；
}
.固定导航img{
垂直对齐：中间对齐；
}
.菜单图标{
右边距：5px；
}
主要{
边缘顶部：55px；
}









您已为其定义了10像素的填充。修复导航听起来不错，但不起作用。尝试过了，但仍然存在间距。您已经为其定义了10像素的填充。修复导航听起来不错，但不起作用。试过了，但差距仍然存在
padding: 10px 0px;