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

Question

我不知道用户图标上的空白（用黄色突出显示）是从哪里来的。我希望用户按钮的右侧只有一小部分空白。

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

我不知道要分享什么片段，因为我不确定问题出在哪里，但下面是 ul 元素的 CSS，整个CSS 和 HTML ul 元素所在的位置。

HTML:

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

CSS 专门针对 ul 元素：

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

虽然你的问题不是很清楚，但根据我的理解，我可以给你这些解决方案。

在第二张图片中，绿色部分是 <ul> 标签的 left-padding 您可以通过设置 padding-right:0.

将其删除

说到为什么你的用户右边有黄色标记space？，是因为你把justify-content设置为start - 这会强制您的 <ui> 元素严格对齐容器的左侧，而将黄色 space 留在右侧。

一个 可能的解决方案 可以将 justify-content 设置为 space-between - 这将使所有 li 平等spaced 并使您的用户向右对齐，删除黄色 space 然后您可以根据需要在右侧添加一点边距。

对 CSS

的拟议更改

nav > ul {
display: flex;
flex-direction: row;
justify-content: space-between; /*proposed changes*/
align-items: center;
margin: unset;
padding:0;                      /*proposed changes*/
}

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

How do I get rid of the whitespace in my navbar?

html

css

removing-whitespace