我正在创建一个简单的导航，其中图像 float 到左侧，而 ul float 到右侧。当我缩小浏览器时，右侧的 ul 不会随着浏览器缩小，我做了一个媒体查询，当 wrapper = 100% 低于 wrappers 宽度时，但这似乎仍然不起作用。下面我将链接我所有的代码:
<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;
}
最佳答案
你的媒体查询是错误的，它应该在底部才不会被覆盖:
* {
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>关于html - 导航不缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30849087/