水平菜单中浮动<li>项目左侧的额外空间</li>

Question

我正在尝试创建一个水平顶部标题，主导航堆叠在子导航上方。这两个导航都是使用带有浮动<ul>项的<li>创建的。子导航在左侧有额外的水平空间，其原因我无法辨别（参见下图中带圆圈的红色区域）：

这是一个小提琴：http://jsfiddle.net/W3qqh/

问题

1. 是什么造成了空间？
2. 如何消除空间？

如果您认为我的方法可以改进，也可以随意提出其他方法来实现所需的菜单。

HTML

<div class="header">
  <div class="home-logo"><a href="/">HOME</a></div>
  <div class="main-nav">
    <ul>
      <li><a>Explore</a></li>
      <li><a>Earn</a></li>
      <li><a class="selected">Merchants</a></li>
    </ul>
  </div>

  <div class="sub-nav">
    <ul>
      <li><a>Be Secure</a></li>
      <li><a>Get Help</a></li>
      <li><a>Contact Us</a></li>
    </ul>
  </div>

</div>

CSS

* { box-sizing: border-box; }

.header { height:99px; width: 100%; position:fixed;}
.header.glass {opacity: 0.8; filter: alpha(opacity=80);}
.home-logo { background: pink; height:99px; width: 239px; position: fixed; }

.main-nav { color: white; position: relative; left:239px; background: #25c0df; height: 66px; line-height:66px; padding: 2px; width: 100%; text-transform: uppercase; font-size: 14px;}
.main-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.main-nav li { float:left; margin-left: 40px;}
.main-nav li a.selected { border-top: 2px solid white; }
.main-nav li a:hover { border-top: 2px solid white; }

.sub-nav { font-size: 12px; color: #4ebeb2;  background: #26b; height: 33px; line-height: 33px; width: 100%; text-transform:uppercase; }
.sub-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.sub-nav li { float:left; margin-left: 40px;}

Answer 1

在.sub-nav中，添加：

float:left;
position:relative;
left:239px;

在.main-nav中，添加：

float:left;

解决方案：您必须在float:left;和.main-nav中添加.sub-nav，并且必须添加position:relative;和left:239px;因为左边的标志。

只需float:left;即可解决您的问题，但您需要添加position和left。否则，您的文字将在徽标后面。

<强> JSFiddle Demo

<强>更新

在.main-nav中，您有：

padding: 2px;

如果您将其删除并在position中添加left和.sub-nav，则不需要float属性。

<强> JSFiddle Demo

Answer 2

这更符合您的要求：http://jsfiddle.net/W3qqh/2/？

首先，将最外面的容器设置为100％宽度。然后浮动三个内部容器div并指定宽度。然后对所有<li>项应用浮点数（或使用display: inline-block）。

.header { width: 100%; }
.home-logo { width: 33.333%; float: left; background: pink; height:99px;  }
.main-nav { width: 66.666%; float: left; color: white; background: #25c0df; height: 66px; line-height:66px; padding: 2px; text-transform: uppercase; font-size: 14px;}
.sub-nav { width: 66.666%; float: left; font-size: 12px; color: #4ebeb2;  background: #26b; height: 33px; line-height: 33px; text-transform:uppercase; }