保持 css 浮动水平对齐

Question

为什么右边的div浮得比左边的两个div高？我怎样才能让它们全部对齐到顶部？

HTML

 <header>
  <div class="nav" style="width:100%;border:#900 thin solid;">


 <ul id='nav-left' style="list-style-type:none;float:left;width:30%;">
 <li class='nav-link'><a href="/bestsellers">Bookstore</a></li>
 <li class='nav-link'><a href="/authors">Authors</a></li>
 </ul>


 <h1 class='nav-logo' style="width:30%;float:left;background-image:url();">
  <a href="#">Logo</a>
 </h1>


 <div class='nav-right'  style="width:30%;float:right;">
<li class='nav-link'><a href="/bestsellers">Sign in</a></li>
<li class='nav-link'><a href="/authors">Sign up</a></li>
</div>
 <div style="clear:both;">

见fiddlehttp://jsfiddle.net/e6h3jyb4/

Answer 1

当您将 <ul> 添加到列表元素时，它会添加边距。将 <ul> 标记添加到右侧列表，它将修复它。

Answer 2

您有 li 元素未包含在 ul 元素中。如果将这些 li 元素包装在 ul 中，那么应该可以解决对齐问题。此外，我建议您将所有列设为 float: left。最后一列是 float: right，因为每列的宽度都是 30%，最后两列之间会有很大的边距。您还可以通过将宽度设置为 33.33% 来解决此问题，使其更接近 1/3 而没有任何剩余边距。

保持 css 浮动水平对齐

Keep css floats horizontally aligned

css

css-float