在响应式html/css站点上左对齐徽标和右对齐导航

Question

我正在尝试左对齐我的标志和右对齐我的导航。我正在使用响应式页面的"骨架"样板。

当我将导航向右浮动时，徽标和导航不会停留在同一条"线"上。在将右浮动规则添加到这个示例之前，我从CSS中删除了它。

这是我正在使用的一些CSS，我认为问题在哪里，其余的都列在这里

.nav {
margin: 0px;
padding: 0px;
white-space: nowrap;
list-style-type: none;
}
.logo {
}
.nav li {
display:inline;
}
.nav li a {
 padding:0.2em 1em;
 background:#;
 color:#000;
text-decoration:none;
border:0px solid #000;
}
.nav li a hover{
background:#08c;
color:#fff;
 } 

Answer 1

您错过了alpha和omega类，它们分别从左侧和右侧元素中删除空白。

HTML应该是这样的:

<div class="header">
       <div class="two-thirds column alpha">
         <div class="logo"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQNGEBMvQ55sHEC0xWxvpkyW-H_ZylS9Fk5ktg3OLKLS3w6yCr29w" width="47" height="36"></div>
      </div>
      <div class="one-third column omega">
        <div class="nav">
          <ul><li><a href="hire.html">hire</a></li><li><a href="bio.html">Bio</a></li><li><a href="contact.html">Contact</a></li><li><a href="blog.html">blog</a></li></ul>
        </div>
      </div>

这是一个代码笔的示例代码:http://cdpn.io/rHBio

编辑

进一步解释(即使在downvote #bitter之后)。

你把导航栏放在两行分开的原因是因为在下面的媒体查询之后，容器和所有的列都被设置为300px。

 @media only screen and (max-width: 767px) {
        .container { width: 300px; }}

对于任何介于480px和767px之间的设备，有另一个媒体查询覆盖了该查询，并给出了420px的宽度。

 @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }

因为使用的类two-thirds和one-third现在被设置为420px或300px，它们占据了整个行(它们变成堆叠/线性)。

要覆盖这一点，让它们在同一行，你需要通过额外的CSS规则来定位这些元素，将它们的宽度减少到100/200px或120/300px，以适应媒体查询。