html - 如何在 CSS 中左右对齐两个部分？

Question

<分区>

Answer 1

Flexbox 忽略 float 。
相反，使用 margin 将左侧导航项与右侧导航项分开。

A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left.

Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works.

Using auto margins for main axis alignment

考虑使用 adjacent sibling combinator以 navigation__left 元素之后的第一个 navigation__right 元素为目标，并设置 margin-left:auto。

.navigation__left + .navigation__right {
  margin-left: auto;
}

演示:

html {
  box-sizing: border-box
}

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

body {
  font: 16px;
  line-height: 1.5;
  background-color: black;
}

a {
  text-decoration: none;
  color: inherit;
}

.navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  background-color: black;
}

.navigation__left {
  border: 2px solid red;
}

.navigation__left,
.navigation__right {
  cursor: pointer;
  color: white;
  padding: 1rem;
}

.navigation__right {
  border: 2px solid blue;
}

.navigation__left+.navigation__right {
  margin-left: auto;
}

.navigation__left img {
  height: 4vh;
}

.navigation__left__dropdown {
  position: absolute;
  margin-top: 1rem;
  display: none;
  color: black;
  background-color: white;
  padding: 20px;
  border-radius: 3%;
}

.navigation__left:hover {
  color: gray;
}

.navigation__left:nth-child(even):hover .navigation__left__dropdown {
  display: block;
}

.navigation__right:last-child a {
  border: 1px solid white;
  padding: 0.5vw 1vw 0.5vw 1vw;
  border-radius: 3%;
}

input {
  height: 3vh;
  width: 15vw;
  background-color: gray;
  border: 0;
  border-radius: 3%;
  padding: 10px;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}

<header>
  <nav>
    <ul class="navigation">
      <li class="navigation__left">
        <a href="https://github.com">
          <img src="github.png" alt="logo">
        </a>
      </li>
      <li class="navigation__left">
        <a href="#">Why Github?</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__left">
        <a href="#">Enterprise</a>
      </li>
      <li class="navigation__left">
        <a href="#">Explore</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__left">
        <a href="#">Marketplace</a>
      </li>
      <li class="navigation__left">
        <a href="#">Pricing</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__right">
        <input type="text" placeholder="Search GitHub">
      </li>
      <li class="navigation__right">
        <a href="#">Sign In</a>
      </li>
      <li class="navigation__right">
        <a href="#">Sign Up</a>
      </li>
    </ul>
  </nav>
</header>

---

顺便说一句，您引用的 Github 导航具有更复杂的结构并使用嵌套的 flexbox 。