css - 保持 css float 水平对齐

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;">

参见 fiddle http://jsfiddle.net/e6h3jyb4/

Answer 1

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