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

在这种情况下，请不要使用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 2

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

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

自动页边距将占据其轴上的所有空间，这就是自动将左右边距定为中心的块的工作方式。

Using auto margins for main axis alignment

考虑使用adjacent sibling combinator定位紧随navigation__right元素的第一个navigation__left元素，并设置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。

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

删除display：flex属性

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

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

4 个答案: