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

请参阅小提琴http://jsfiddle.net/e6h3jyb4/

Answer 1

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

Answer 2

您的li元素不包含在ul元素中。如果你将这些li元素包装在ul中，那么这应该可以解决你的对齐问题。另外，我建议您将所有列浮动：左。你的最后一列是浮点数：右边，因为每个列的宽度都是30％，你在最后两列之间会有很大的余量。你也可以通过使你的宽度为33.33％来解决这个问题，使其接近1/3而没有任何剩余的余量。

保持css浮动水平对齐

2 个答案: