我有一些代码基本上是由核心脚手架生成的。我是CSS新手。问题是，在这个菜单中有一个按钮，导致它左边的选项略高于其他选项。按钮是Logout，它左边的选项是profile。通过反复试验，我将原因缩小到注销时的类。

为什么会发生这种情况，解决办法是什么？

此网页复制了该问题。

顺晟科技：

home不受影响，因为如果删除 在第二个和第三个之间，您将看到home与logout不对齐，如下片断所示:

要解决这个问题，您需要所有元素都在同一个无序的HTML列表中，然后如果类有边框，就像本例中的类一样，您应该使所有元素具有相同的类。正如@cursorrux所说的，它有一个透明的边框，而其他所有的边框都没有。

查看以下代码:

Bootstrap-4上的类有默认的CSS，因为它没有应用于'profile'元素，所以导致了这个问题。

为什么边框有这种效果？

在CSS中，元素有自己的边框属性。如果没有定义边框的样式，边框将是不可见的。这是因为样式默认为。在我们的例子中，border的定义使用它消耗元素周围的空间。如果边框设置为或，则不会占用任何空间。

为什么家里不受影响？它没有btn样式。

'home'包装在容器下，容器具有bootstrap类，并且该类将css应用于元素。

以及CSS`flex-grow'如何工作？ Flex-grow告诉我们的元素是否可以占用额外的空间。当我们将flex-grow值设置为1或更大时，我们告诉我们的元素要增长以占用可用空间。flex-grow值设置为0的元素不会增长以占用可用空间。

此文档也对您有帮助。

片段:

这里是一个简短的代码片段，其中and menu没有类，但menu有css到它们的父容器，这导致menu占用空间，看起来与menu类似:

在这里，菜单没有类，菜单也没有引导css类到它们的父元素。在本例中，menu不占用额外的空间，并且看起来与and菜单类似，而不管是否包装到另一个元素中: