如何摆脱导航栏中的空白？

Question

我不知道用户图标正好是空白（用黄色突出显示）来自何处。我希望用户按钮的右侧只有很小的空白。

如果我尝试检查它（请参见下面的图片），它说它是 ul 元素的一部分，但我找不到问题。

我不知道共享哪个代码段，因为我不确定问题出在哪里，但是下面是 ul 元素的CSS，整个CSS和所在的HTML ul 元素是

HTML：

https://github.com/NezaVizintin/Swapet/blob/master/Views/Shared/_Layout.cshtml

专门用于 ul 元素的CSS：

nav > ul { /*all elements together on navbar*/
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
margin: unset; }

整个CSS：

https://github.com/NezaVizintin/Swapet/blob/master/wwwroot/css/custom-swapet.css

Answer 1

在这里， 我不知道确切的问题，但是padding: 0将解决您的问题。

nav > ul { /*all elements together on navbar*/
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin: unset;
    padding: 0;
}

让我知道它是否不适合您。

Answer 2

尽管您的问题不是很清楚，但是根据我的理解，我可以为您提供这些解决方案。

在第二个图像中，绿色部分是left-padding标签的<ul>，您只需设置padding-right:0即可将其删除。

说说为什么用户右边有黄色标记的空格？，这是因为您将justify-content设置为start-这迫使您的{ {1}}元素以严格对准容器的左侧，而将黄色空间留在右侧。

对此的一个可能的解决方案可以将<ui>设置为justify-content-这将使所有space-between等距分布，并使您的用户向右对齐以删除该黄色空间，然后根据需要在右侧添加一点空白。

对CSS的建议更改

li