在调整浏览器窗口大小时，最后一个 <li>当浏览器达到其最小尺寸时，本网站导航栏中的元素总是跳到一个新行，而不是所有元素都留在一行中。我试过最小化边距和填充，但没有解决问题。
我在网络开发类(class)的 CSS 部分，我们被要求使用 max-width 和 mid-width 属性以及百分比来调整我们练习网站主要部分的大小(让我们习惯使用百分比等)，我觉得这一定是问题的一部分。
非常感谢任何想法。我也试过调整 white-space 属性，包装 <nav>在另一个 div 等中。不确定出了什么问题。
<!DOCTYPE html>
<html>
<head>
<!-- font-family: 'Open Sans', sans-serif; -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
* {
font-family: 'Open Sans', sans-serif;
}
* {
list-style-type: none;
}
/* Section Sizes */
body {
background-color: #ffffff;
margin: 0;
padding: 0;
width: 100%;
min-width: 480px;
}
header {
width: 100% min-width: 480px;
height: 4rem;
}
.width,
#container {
min-width: 480px;
max-width: 1080px;
margin: 0 auto;
width: 100%;
}
.width:after,
#container:after,
header:after,
ul:after,
li:after,
#articles:after {
display: table;
content: "";
clear: both;
}
/* Header Styles */
header {
border-bottom: 1px solid #0099cc;
margin-bottom: 4rem;
}
header .width h1 {
float: left;
margin: 0;
margin-right: 5rem;
margin-top: 0.7rem;
color: #ce6d0b;
font-size: 1.4rem;
font-weight: 400;
padding: 0;
}
header .width ul {
bottom: 0;
padding: 0;
}
header .width ul li {
float: left;
}
header .width ul li:last-child {
padding-right: 0;
}
header .width ul li a {
color: #8c8c8c;
text-decoration: none;
border-bottom: 10px solid transparent;
font-size: 1.1rem;
display: block;
text-align: center;
padding: 0.95rem 1.5rem;
}
header .width ul li a:hover {
border-bottom: 10px solid #0099cc;
color: #404040;
}
header .width ul .active a {
color: #404040;
border-bottom: 10px solid #0099cc;
}
</style>
</head>
<body>
<!-- global site header -->
<header>
<div class="width">
<h1>Mockup 2</h1>
<nav>
<ul>
<li class="active"><a href="#" title="Dashboard">Dashboard</a>
</li>
<li><a href="#" title="Section 2">Section 2</a>
</li>
<li><a href="#" title="Section 3">Section 3</a>
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>http://jsbin.com/vahemoy/edit?html,output
谢谢。
最佳答案
如果没有足够的空间，带有 float: left 的元素将像文本一样换行。您需要做的是确保容器内的所有元素始终有足够的空间。在这种情况下，最后一个 li 对我来说在 572px 处换行，但是您将 min-width 设置为 480px .
尝试增加您的 min-width。然后，当窗口缩小时，您将看到一个滚动条以查看其余内容，而不是让它换行。
关于html - 为什么当我缩小浏览器窗口时，标题中的 <li> <nav> 元素会下降？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35399651/