Question

每当我浏览器（Firefox）屏幕最大化时我都会查看我的网页，一切都很好。但是当我恢复屏幕（与最大化相反）时，我的UL列表项会从之前的位置重新定位。我搜索了解决方案并找到了我的想法。从我读到的，我应该使用绝对位置。当我这样做时，我没有运气。然后我试着“清楚：两个”，但也无济于事。有人可以解释为什么会这样吗？以下HTML是我正在使用的。然后您将看到的CSS是您看到我链接到的外部css文件。

<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>QuipStir</title>
 <link rel="stylesheet" href="css/alltrimmings.css">
 <link rel="stylesheet" href="css/reset.css">
  <meta name="description" content="Users ">
 <style>
 </style>
 <script>
  document.createElement('header');
  document.createElement('nav');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('footer');
</script>
</head>
<body>
<div class="wrapper">
<header>
<div id="header_list">
 <ul>        
<li><a href="profile.php">MY PROFILE</a></li>
    <li><a href="profile.php">NEST UPDATES</a></li>
    <li><a href="profile.php">FEATURED UPDATE</a></li>
    <li><a href="profile.php">OCCUPATION INFORMATION</a></li>
    <li><a href="profile.php">MESSAGES</a></li>
    <li><a href="profile.php">MY PERSONALITY</a></li>
    <li><a href="profile.php">MY PET</a></li>
    <li><a href="profile.php">EDIT PROFILE</a></li>
<li><a href="account.php">ACCOUNT</a></li>        
<li><a href="help.php">HELP</a></li>
<li><a href="index.php">LOG OFF</a></li>
</ul>
  </div>
 <h4>Quip-Stir</h4> 
</header>
</div>
</body>
</html>


//Below is where my external CSS begins. Thank you all for any help you can provide.




html,
body{
 width:100%;
 height:100%;
 max-width:1600px;
 min-width:320px;
}

body {
background-color:#EBECE4;
} 



header{
background-color:#8b2323;
-moz-box-shadow:    0px 1px 1px 0px rgb(58,78,70);
    -webkit-box-shadow: 0px 1px 1px 0px black;
     box-shadow:         0px 1px 1px 0px black;
     height:23px;
}

h4{
color:#FFE7BA;
margin:0px;
font-style:italic;
}


#header_list ul {
margin: 0px 0px 0px 0px;
float:right;
} 


#header_list ul li{
display:inline;
}

   #header_list ul li a:hover{
    color: white;
    background-color:grey;
   }

   #header_list ul li a{
   Font-size:12px;  
   font-weight:bold;
   font-family:"Times New Roman", Times, serif;
   text-decoration:none;
   padding:5px 12px;
   color:#FFF8DC;
   text-shadow: 0px 1px 1px black;
   height:10px;
   }

Answer 1

在您的css中，更改min-width值：

body
{
    min-width: 1200px;
}

这应该可以防止你的元素挤压在一起，因为这就是我解释你的问题的方法。

Answer 2

你想要改变

body {
  min-width: 320px;
}

到

body {
  min-width: 1300px;
}

或可能大于1300px的内容，如果您希望它更宽。

演示：http://jsbin.com/UHIPUFux/1/

当我恢复页面时，网页元素会移动

2 个答案: