css - 如何在不使用 float 的情况下正确对齐导航栏中的元素？

Question

我有一个包含 3 个部分的导航栏:

• 一个标志
• 搜索栏
• 组合在一起的几个菜单选项

我希望它看起来像这样，其中 Logo 左对齐，搜索栏有左填充，分组链接在右侧:

如果我尝试将组向右浮动，它们不会垂直居中对齐。

<nav>
  <a class='logo-link' href="#">Example</a>

  <div class="search">
    <form accept-charset="UTF-8" action="/search" method="get">
      <div style="margin:0;padding:0;display:inline"></div>
      <input class="main_search" type="text" />
      <input class="inline_search" type="submit" value="Search" />
    </form>
  </div>

  <div>
    <div class="anchorLink">
      <a href="#">Blog</a>
    </div>

      <div class="anchorLink">
        <a href="#">Login</a>
      </div>

      <div class="anchorLink">
          <a href="#">Register</a>
      </div>
  </div>
</nav>

我附上了 fiddle of an example .

Answer 1

你可以使用

text-align:justify; + display:inline-block; DEMO ，然后您可以使用:vertical-align:middle; 将您的元素对齐到彼此的中间 DEMO bis

或

display:flex; + justify-content:space:between; DEMO2 然后您可以使用 margin:auto; 在两个轴上居中 DEMO3