Question

当我将鼠标悬停在li上时，左侧有一个间隙，我在开发者控制台中找不到任何解释它的内容。

.custom-nav>li {
  padding: 1.5em 1em;
  border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
  padding: 1.5em 1em;
}
.custom-nav>li:hover {
  background: #777;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline custom-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

Bootstrap使列表项成为内联元素，内联元素对空白区域敏感。只需删除它们之间的空白区域：

.custom-nav>li {
  padding: 1.5em 1em;
  border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
  padding: 1.5em 1em;
}
.custom-nav>li:hover {
  background: #777;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline custom-nav">
        <li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>

您也可以使用HTML注释来占用空格：

<li><a href="#">Link</a></li><!--
--><li><a href="#">Link</a></li><!--
--><li><a href="#">Link</a></li>

Answer 2

内联元素之间的换行符会创建一个空格。有几种方法可以解决它：将父级的字体大小设置为0px，删除换行符，发表评论

line breaks like that:
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline custom-nav"><!--
        --><li><a href="#">Link</a></li><!--
        --><li><a href="#">Link</a></li><!--
        --><li><a href="#">Link</a></li><!--
      --></ul>
    </div>
  </div>
</div>

Fiddle demo

Answer 3

我建议你添加这些CSS选项（然后再进一步编辑CSS）：

[ 3.  2.]

Navbar链接之间存在无法解释的差距

3 个答案: