小编JL *_*fin的帖子

幻影白色空间介于2 <li>之间

为新的网站设计构建了一个简单的无下拉水平导航,它的工作正常,除了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, 0.61);
      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.57);
      color: #fff;
    }
Run Code Online (Sandbox Code Playgroud)
<ul class="navi">
  <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 …
Run Code Online (Sandbox Code Playgroud)

html css

5
推荐指数
1
解决办法
286
查看次数

标签 统计

css ×1

html ×1