Question

我正在创建一个简单的导航，其中图像浮动到左侧，ul浮动到右侧。当我缩小浏览器时，右边的ul不会随浏览器缩小，我做了一个媒体查询，当包装器宽度低于包装器宽度时，它使得包装器= 100％，但这似乎仍然没有工作。下面我将链接我的所有代码：

    <html>
<head>
    <title>Nav</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<nav>
    <div class="wrapper">
<img src="logo.png">
<ul>
        <a href=""><li>home</li></a>
        <a href=""><li>about</li></a>
        <a href=""><li>work</li></a>
        <a href=""><li>contact</li></a>
    </ul>
</nav>
</div>
</body>
</html>

同样，这可能只是一个小小的错误，所以如果这是一个简单的解决方案我很抱歉。

@media all (max-width: 960px) {
    .wrapper {
        width: 100%;
    }
}

* {
    margin: 0;
    padding: 0;
    font-family: ralewayb;
}

.wrapper {
    width: 960px;
    margin: 0 auto;
}

@font-face {
    font-family: 'ralewayb';
    src:url(Raleway-Bold.ttf);
}

nav {
    width: 100%;
    height: 60px;
}

nav > .wrapper > img {
    float: left;
}

nav > .wrapper > ul {
    float: right;
    display: block;
}

nav > .wrapper > ul > a {
    text-decoration: none;

}

nav > .wrapper > ul > a > li {
    display: inline-block;
    text-align: center;
    width: 65px;    
    line-height: 60px;
    color: #303030;
    font-size: 15px;
    text-transform: uppercase;
}

Answer 1

您的媒体查询错误，它应位于底部，不会被覆盖：

* {
  margin: 0;
  padding: 0;
  font-family: ralewayb;
}
.wrapper {
  width: 960px;
  margin: 0 auto;
}
@font-face {
  font-family: 'ralewayb';
  src: url(Raleway-Bold.ttf);
}
nav {
  width: 100%;
  height: 60px;
}
nav > .wrapper > img {
  float: left;
}
nav > .wrapper > ul {
  float: right;
  display: block;
}
nav > .wrapper > ul > a {
  text-decoration: none;
}
nav > .wrapper > ul > a > li {
  display: inline-block;
  text-align: center;
  width: 65px;
  line-height: 60px;
  color: #303030;
  font-size: 15px;
  text-transform: uppercase;
}
@media screen and (max-width: 960px) {
  .wrapper {
    width: 100%;
  }
}

<nav>
  <div class="wrapper">
    <img src="//lorempicsum.com/futurama/50/50/2">
    <ul>
      <a href="">
        <li>home</li>
      </a>
      <a href="">
        <li>about</li>
      </a>
      <a href="">
        <li>work</li>
      </a>
      <a href="">
        <li>contact</li>
      </a>
    </ul>
</nav>
</div>

导航不缩放

1 个答案: