html – 2> s之间的幻影空格

概述为新的网站设计构建了一个简单的无下拉水平导航,它的工作正常,除了2个按钮之间是一个虚幻的白色空间,不会出现在dragonfly的指标或代码中,但在屏幕上可见当李的悬停规则适用时.它并没有出现在每个li之间,只是在两个特定的lis之间.我附上的图片显示我的意思： 没问题,一切看起来都应该如此： 在悬停的李的右侧是一个不应该存在的空白的px： .navi { display: inline 为新的网站设计构建了一个简单的无下拉水平导航,它的工作正常,除了2个按钮之间是一个虚幻的白色空间,不会出现在dragonfly的指标或代码中,但在屏幕上可见当李的悬停规则适用时.它并没有出现在每个li之间,只是在两个特定的lis之间.我附上的图片显示我的意思：

没问题,一切看起来都应该如此：

在悬停的李的右侧是一个不应该存在的空白的px：

.navi {      display: inline-block;      height: 50px;      max-height: 50px;      overflow: hIDden;      List-style: none;      float: right;    }    .navi li {      float: left;    }    .navi li a {      padding: 16px;      border-left: 1px solID #8bd854;      Font-size: 16px;      text-decoration: none;      line-height: 50px;      color: #8c8c8c;      Transition: all 0.5s ease;    }    .navi li a:hover {      background-color: rgba(13,137,0.61);      text-shadow: 0px 1px 3px rgba(0,0.57);      color: #fff;    }

<ul >  <li><a href="">Home</a></li>  <li><a href="">About</a></li>  <li><a href="">Lawn Care</a></li>  <li><a href="">Tree &amp; Shrub Removal</a></li>  <li><a href="">Contact</a></li></ul>

任何想法可能来自哪里？如果不是可解决的话,这不是一个大问题,但这是一个烦恼.

提前致谢

解决方法 我不完全确定导致这种情况的原因.也许它是webkit或CSS的一些细微差别,但至少在这一个特殊情况下,你可以添加display：block to .navi li a并将padding：16px更改为padding：0 16px在同一规则上.不幸的是,我无法弄清楚为什么会有效,但我最好的猜测是空白导致问题. 总结

以上是内存溢出为你收集整理的html – 2> s之间的幻影空格全部内容，希望文章能够帮你解决html – 2> s之间的幻影空格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。