Question

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

A logo
搜索栏
两个菜单选项组合在一起

我希望它看起来像这样，徽标左对齐，搜索栏左边填充，分组链接在右边：

enter image description here

如果我尝试将组浮动到右侧，则它们不会垂直对齐到中间。

<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

您可以使用display属性，尝试display:inline-block代替float并设置.search类样式，如下所示：

CSS

.search {
    margin: 0 auto;
    max-width: 90%;
    padding-top: 0;
    display: inline-block;
    padding-left: 10em; /* Reduce padding
    font-size: 0.75em;
}

添加了CSS类

.nav--list{
    display:inline-block;
}

Fiddle Example

Answer 2

您可以使用

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

或

display:flex; + justify-content:space:between; DEMO bis 然后您可以使用margin:auto;以两个轴为中心 DEMO2

Answer 3

有效的方法：

<强> HTML

<div id="header">
  <ul>
      <li><div>logo area</div></li>
      <li><div>search area</div></li>
      <li><div>other area</div></li>
  </ul>
</div>

<强> CSS：

#header ul li{
  list-style:none;
  display: inline;
  padding-left:20%;
}

注意：不同的“显示”选项会为您提供不同的元素装饰。在这里，display：inline会使显示垂直。

在此处查看W3schools课程，以便进一步了解：http://www.w3schools.com/css/css_display_visibility.asp

Answer 4

如果要将锚链接对齐到布局右侧，则应

对齐徽标和左侧搜索
将选项链接对齐
顺便说一下：我建议使用无序列表而不是几个div作为链接

HTML

 <nav>
  <div class="logo">
      <a class="logo-link" href="#">Example</a>
  </div>
  <div class="search">
    <form accept-charset="UTF-8" action="/search" method="get">
      <input class="main_search" type="text" />
      <input class="inline_search" type="submit" value="Search" />
    </form>
  </div>

  <ul class="anchorLinks">
    <li><a href="#">Blog</a></li>
     <li><a href="#">Login</a></li>
      <li><a href="#">Register</a></li>
  </ul>
</nav>

CSS

nav {
    background-color:#EEE;
    height:25px;
    padding:10px;
}

.logo {
    float:left;
    padding-right:20px;
}

.search {
    float:left;
}

ul.anchorLinks {
    float:right;
    margin:0;
    padding:0;
    list-style-type:none;
}

ul.anchorLinks li {
    float:left;
    padding:0px 5px;
}

请参阅jsfiddle此处

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

4 个答案: