时间戳

首页 > 解决方案 > 如何均匀分布

  • 使用 Flexbox 的导航栏中的项目？HTML

    • html - 如何均匀分布
  • 使用 Flexbox 的导航栏中的项目？HTML

    • 问题描述

    我正在尝试为投资组合网站创建一个简单的导航栏。我的 HTML 和 CSS 在下面。我不知道如何均匀地间隔 '''li''' 项目。我无法将 justifiy-content:space-evenly 应用于 UL，因为相同的代码正在应用于 '''div class="headerContainer'''

    .headerContainer {
    display: flex;
    background-color: lightblue;
    justify-content: space-between;
    align-items: center;
}

ul {
    list-style-type: none;
    display: flex;

}

li a {
    text-decoration: none;
}
    <header>
    <div class="headerContainer">
        <div class="logo">Robert Emmet</div>
        <nav>
            <ul>
                <li><a href="#" class="">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

        </nav>
    </div>
</header>

    标签： htmlcss

    解决方案

    .headerContainer {
  display: flex;
  background-color: lightblue;
  justify-content: space-between;
  align-items: center;
}

ul {
  list-style-type: none;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}



nav {
  width: 100%;
}
    <header>
  <div class="headerContainer">
    <div class="logo">Robert Emmet</div>
    <nav>
      <ul>
        <li><a href="#" class="">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

    推荐阅读