我正在使我的所有容器都保持完整状态＆＃34;当视口小于网站的分辨率时，并正确定位。
到目前为止，除了导航栏之外，一切都变得简单了。
在调整窗口大小时，导航栏文本会移动。 它目前与float：right;
保持一致有浮动的替代方法可以在这个实例中工作吗？ 我尝试定义左右边距，但文字并没有保持直线。
有问题的网站是：njdartistics.com
@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'Bebas';
src: url(Website%20Specific%20Resources/BEBAS.TTF)
}
body {
background-image:url(Website%20Specific%20Resources/Background.png);
width:1920px;
margin: auto;
}
.outercontainer{
height:100%;
width:100%
}
.container {
width:960px;
margin: 0 auto;
border-left:solid #000;
border-right:solid #000;
background-color:#AAADAD;
}
.header {
background-image:url(Website%20Specific%20Resources/New_Banner_.png);
height: 300px;
width: 100%;
top: 0;
position: fixed;
}
A {
text-decoration:none;
font-family: "bebas";
color: #fff;
}
li {
list-style:none;
float:left;
padding-right:50px;
margin-left:25px;
padding-top:15px;
font-size:24px;
}
.nav {
float: inherit;
position: absolute;
}
.content {
font-family: "bebas";
width: 900px;
background-color:#AAADAD;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="nav">
<ul>
<li><a href="#">Home </a></li>
<li><a href="#">About Us </a></li>
<li><a href="#">Products </a></li>
<li><a href="#">Gallery </a></li>
<li><a href="#">Contact Us </a></li>
</ul>
</div>
</div>
</div>
<div class="outercontainer">
<div class="container">
<div class="content" >
<p>asdasdasdasdaf</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>asdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasda</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>sdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdaf</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</body>
</html>
提前致谢。
答案 0 :(得分：0)
正如我所理解的那样，您希望导航栏文本响应并保持一条线，对吗？
首先，尝试将以下css更改为以下内容：
body {
background-image:url(Website%20Specific%20Resources/Background.png);
font: 100%/1.5 serif; /* 16px */
width:1920px;
margin: auto;
}
li {
list-style:none;
float:left;
font-size:1.5em;
font-size:3vw;
padding:0 1%;
width:15%;
}
.nav {
float: inherit;
position: absolute;
width:100%;
}
使用em和vw的组合处理字体大小（但应注意，vw或视口宽度在每个浏览器中都不起作用（see here）。对于不支持的浏览器喜欢它，em可以尝试通过根据你为身体设置的任何字体大小来处理它。
或者（或者，实际上，另外 - 随意争吵），当涉及到字体大小时，您可以使用媒体查询来处理较小的视口/屏幕大小。例如：
@media (max-width: 600px) {
body { font: 80%; }
}
您可以根据需要调整大小。如果将其设置在主体上，则不必重写li或nav css，因为em单元将相应地做出响应。我会避免在任何事情中设置字体大小，因为px没有太大的灵活性。
也就是说，在这之后，你真的应该为移动设备设置不同的断点，例如，堆叠菜单或用汉堡包菜单图标将其半隐藏，否则文本会变得非常非常小。 。
答案 1 :(得分：0)
header {
background-image:url(Website%20Specific%20Resources/New_Banner_.png);
height: 300px;
width: 1920px;
top: 0;
position: fixed;
}
这就是问题所在。宽度为100％而不是固定分辨率。