[英]Navigation Bar Gap On Hover
I'm working on cordova android application, im trying to make navigation bar, i've done created it but there is a gap on it. 我正在研究cordova android应用程序,我正在尝试制作导航栏,我已经完成了创建它,但是有一个空白。 I don't know where is this gap come from, i want to remove the gap.
我不知道这个差距来自哪里,我想消除这个差距。
This is my HTML : 这是我的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>
And this is my CSS : 这是我的CSS:
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ddd;
white-space: nowrap;
height: 50px;
box-sizing: border-box;
padding: 10px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
}
.fixed-nav ul,
.fixed-nav li {
display: inline;
}
.fixed-nav a {
text-decoration: none;
text-transform: uppercase;
padding: 17px 10px;
color: #333;
font-family: arial;
}
.fixed-nav a:hover {
background-color: #000;
color: #eee;
}
.fixed-nav ul {
padding: 0;
}
.fixed-nav img {
vertical-align: middle;
}
.menu-icon{
margin-right: 5px;
}
main {
margin-top: 55px;
}
In .fixed-nav change the padding value From 在.fixed-nav中更改填充值
padding: 10px;
To 至
padding: 10px 0px;
Try following code, 尝试以下代码,
.fixed-nav { position: fixed; top: 0; left: 0; width: 100%; background-color: #ddd; white-space: nowrap; height: 50px; box-sizing: border-box; padding: 10px 0px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } .fixed-nav ul, .fixed-nav li { display: inline; } .fixed-nav a { text-decoration: none; text-transform: uppercase; padding: 17px 10px; color: #333; font-family: arial; } .fixed-nav a:hover { background-color: #000; color: #eee; } .fixed-nav ul { padding: 0; } .fixed-nav img { vertical-align: middle; } .menu-icon{ margin-right: 5px; } main { margin-top: 55px; }
<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>
You have given .fixed-nav
a padding of 10px
. 您给
.fixed-nav
填充了10px
。 Remove the padding on the left to fix the issue. 除去左侧的衬垫以解决此问题。
An alternative approach to your layout using flexbox ... 使用flexbox进行布局的另一种方法...
.fixed-nav { position: fixed; top: 0; left: 0; width: 100%; background-color: #ddd; white-space: nowrap; height: 50px; box-sizing: border-box; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } .fixed-nav ul, .fixed-nav li, .fixed-nav a { display: flex; } .fixed-nav ul { height: 50px; margin: 0; } .fixed-nav a { text-decoration: none; text-transform: uppercase; color: #333; font-family: arial; align-items: center; padding: 0 10px; } .fixed-nav a:hover { background-color: #000; color: #eee; } .fixed-nav ul { padding: 0; } .fixed-nav img { vertical-align: middle; } .menu-icon { margin-right: 5px; } main { margin-top: 55px; }
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.