如何在 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 将左侧导航项与右侧导航项分开。

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

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

How can I align two parts at the left and right in CSS?

html

css

css-float