0

我正在尝试左对齐我的徽标并右对齐我的导航。我正在为响应式页面使用“骨架”样板。

当我向右浮动导航时，徽标和导航不会保持在同一条“线上”。在将其添加到此示例之前，我从 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;
 }
4

1 回答 1

2

您缺少分别从左右元素中删除边距的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; }}

对于 480 像素到 767 像素之间的任何设备，还有另一个媒体查询会覆盖该媒体查询，并提供 420 像素的宽度。

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

于 2013-01-21T00:17:28.297 回答