我有一个包含 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 .
最佳答案
你可以使用
text-align:justify;
+ display:inline-block;
DEMO ,然后您可以使用:vertical-align:middle;
将您的元素对齐到彼此的中间 DEMO bis
或
display:flex;
+ justify-content:space:between;
DEMO2 然后您可以使用 margin:auto;
在两个轴上居中 DEMO3
关于css - 如何在不使用 float 的情况下正确对齐导航栏中的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23201759/