Question

我一直在使用bootstrap很长一段时间，我在使用inline-block代替float时遇到了一个奇怪的行为，在我描述我的整个问题之前，让我说我不要＆＃ 39; t广泛使用内联块，并且错误似乎与行高有关。

好的，所以 HERE 是错误，因为您可以看到导航项和边框之间存在差距，这会破坏我的设计，现在发生这种情况，因为我更改了{在以下行中{1}}到float:left：

inline-block

那为什么会出现这种差距呢？（我知道使用float会从正常流中删除元素并使用内联块，元素将返回到文档的正常流程中。）。

现在我发现这实际上是因为线高而发生的。

TWBS，默认行高是1.4，所以现在，如果我的代码中的以下行，我的问题就解决了：

    .navbar-nav {
        float: none;
        display: inline-block;
        margin: 0;
    }

以上代码已添加到.navbar-default .navbar-collapse { text-align: center; line-height: 0; }。现在看看我如何将行高减少到ul，我对0有一个中间的理解，我想问的是我在这里使用正确的解决方案吗？为什么线高会确实导致这个错误？

P.S。这是＆＃34;为什么＆＃34;问题，而不是＆＃34;我如何解决这个问题＆＃34;题。请用证据支持你的答案，这将是伟大的:)

Answer 1

原因是inline-block将一个块级元素放在一行上，就像一行文本一样，然后它沿着该基线进行垂直对齐。当你将line-height设置为零时，这个事实就会变得模糊，因为沿零线高度的各个点之间没有区别。

您可以添加vertical-align: bottom;，如下所示，以更改内联块元素相对于基线的位置，它应该可以解决问题。

.navbar-nav {
  float: none;
  display: inline-block;
  margin: 0;
  vertical-align: bottom;
}

效果应该难以区分。

Answer 2

您已将内联块添加到ul元素而不是li

改变这一点;

.navbar-nav {
        li{
          float: none;
        display: inline-block;
        margin: 0;
        }
}

Answer 3

在navbar-nav元素上将显示更改为内联而不是内联块。

navbar-nav {
    float: none;
    display: inline !important;
}

<强> Fiddle

行高和内联块导致边框和元素之间的空间

3 个答案: