Question

我正在尝试左对齐我的徽标并右对齐我的导航。我正在使用“skeleton”样板来显示响应式页面。

当我向右移动导航时，徽标和导航器不会保持在同一“线”上。在将CSS添加到此示例之前，我从CSS中删除了浮动权限规则。

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

.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以适应媒体查询。

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

1 个答案: