如何在 CSS 中对齐左右两个部分？ [复制]

Question

我正在实现 github 的导航栏，想要左右对齐两个部分。因此，我使用了float 属性，但它不适用于我的代码。我怎么了？

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;
  float: left;
}

.navigation__right {
  border: 2px solid blue;
  float: right;
}

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

.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>

JSFIDDDLE

Answer 1

移除 display:flex 属性

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

Answer 2

在这种情况下不要使用 Flex。

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 {
  width: 100%;
  background-color: black;
}

.navigation__left {
  border: 2px solid red;
  float: left;
}

.navigation__right {
  border: 2px solid blue;
  float: right;
}

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

.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>

Answer 3

您可以将display:flex 设置为inline-block

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: inline-block;
  flex-direction: row;
  align-items: center;
  width: 100%;
  background-color: black;
}

.navigation__left {
  border: 2px solid red;
  float: left;
}

.navigation__right {
  border: 2px solid blue;
  float: right;
}

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

.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>

Answer 4

Flexbox 忽略浮动。
而是使用margin 将左侧导航项与右侧导航项分开。

一种常见的模式是导航栏，其中一些关键项向右对齐，主要组在左侧。

自动边距将占据其轴上的所有空间——这就是使用自动左右边距使块居中的工作原理。

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 导航结构稍微复杂一些，并且使用嵌套的弹性框。