如何使导航栏项目之间的空间彼此相同

Posted 2023-03-05

【中文标题】如何使导航栏项目之间的空间彼此相同

【英文标题】：How can I make the space between the items of the nav bar be the same between each other

【发布时间】：2021-12-01 13:52:36

【问题描述】：

我正在尝试使导航栏项目之间的空间彼此相同。听起来很简单，但我没能做到。我真的很感激这方面的一些帮助。这是html和CSS。下面是相关代码：Here's a photo of the output

HTML：

<nav class="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="tweets.html">Why programming? <a></li>
                    <li><a href="goals.html">Aspirations and goals<a></li>
                    <li><a href="my_projects.html">Projects</a></li>
                    <li><a href="books.html">Favourite books</a></li>
                    <li><a href="interests.html">Interests</a></li>
                </ul>
            </nav>

CSS：

nav
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    right: -90px;
    flex-wrap: wrap;
    bottom:10px;
    align-items:flex-end;
    font-size: 20 px;
    padding: 0px;
    line-height: 0px;
    padding-left:50px;
    padding-right: 50px;

【问题讨论】：

在 CSS 中，您的目标是 nav 元素，但 nav 元素不是链接（列表元素）的直接父元素。

【参考方案1】：

因为你使用的是 flex-box，所以你可以使用 justify content space between, space around or space evenly，也可以使用 margin left, right 属性

ul 
    display: flex;
    justify-content : space-between / space-evenly  / space-around 

【参考方案2】：

这样做

ul 
    display: flex;
    justify-content : space-between or space-evenly (as per design)
    width:100%

【参考方案3】：

在我用上面的代码测试它并通过添加一些东西来修复它之后解决你的问题。这适用于仍在使用的现有 css 代码！！

您没有在您的 css 中使用 li 或 ul 类，这是您尝试做的很大一部分。您可以添加 li a 以具有 padding-left: 4px; 和 padding-right: 4px; 和 display: flex; - 另外，通过使 ul list-style-type: none; 您的列表旁边不会有列表图标。

ul 
  list-style-type: none;

li 
  float: left;

li a 
  display: flex;
  padding-left: 4px;
  padding-right: 4px;

【参考方案4】：

您可以在ul 上使用弹性框：

ul 
  display: flex;
  list-style-type: none;
  justify-content: space-between;

ul 
  display: flex;
  list-style-type: none;
  justify-content: space-between;

<nav class="menu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="tweets.html">Why programming? </a></li>
    <li><a href="goals.html">Aspirations and goals</a></li>
    <li><a href="my_projects.html">Projects</a></li>
    <li><a href="books.html">Favourite books</a></li>
    <li><a href="interests.html">Interests</a></li>
  </ul>
</nav>

【参考方案5】：

仅使用提供的代码无法完全测试它，但尝试在 css 中设置您的边距，它们应该控制您的距离。你可能想修改 margin-left 和 margin-right

justify-content: space-evenly; /* Distribute items evenly Items have equal space around them */或许也值得一试