时间戳

首页 > 解决方案 > 对齐内容：空间均匀不工作

html - 对齐内容：空间均匀不工作

问题描述

我正在尝试在中间的同一个容器中创建一个响应式导航栏，其中包含三个项目，如下所示。

导航栏应该是什么样子

由于某种原因， ul 项目的空间不均匀，它向我展示了这一点：

3 li 项目的间距不均匀

我使用了这些代码行：

nav {
  font-size: 1.5em;
  display: flex;
  justify-content: space-between;
}

ul {
  flex: 1;
  max-width: 50%;
  display: flex;
  justify-content: space-evenly;
}

ul,
li {
  display: inline;
  margin: 0;
  padding: 0;
}
<nav>
  <a href="#home">Home</a>
  <ul>

    <li>
      <a href="#Home">Learn More</a>
    </li>
    <li>
      <a href="#Home">About</a>
    </li>
    <li>
      <a href="#Home">Contact</a>
    </li>

  </ul>
  <a href="#signup">Sign Up</a>
</nav>

如果这篇文章不清楚，我感谢任何帮助并道歉；我还是这个网站的新手。

标签： htmlcssflexbox

解决方案

space-evenly或者space-between会工作！

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: block;
  width: 90%;
  margin: 5% auto;
}

nav {
  display: flex;
  justify-content: space-evenly;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

li+li {
  margin-left: 1.5rem;
  float: left;
  display: inline-block;
}
<header>
  <nav>
    <a href="">Home</a>
    <ul>
      <li><a href="">Learn More</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact</a></li>
    </ul>
    <a href="">Sign Up</a>
  </nav>
</header>

推荐阅读