更改屏幕大小时如何防止 div 移动到位？

Question

有人能告诉我为什么当我缩小屏幕尺寸时 li 会移动吗？即使我更改屏幕尺寸，我也希望它们始终位于原处。我有一种感觉，这与 .fixedwidth 有关，尽管我一直在尽力解决问题，但仍然找不到它是什么。 What my code looks like.

<!doctype html>
<html>

<head>
<title>Noam's BBC</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">

   body {
    margin: 0;
    background-color: white;
    font-family: Arial,Helvetica,freesans,sans-serif;
    }

   #topbar {
    background-color:#FFFFFF;
    width: 100%;
    height: 40px;
    color: black;
    border-bottom: 1px solid #CCCCCC;
    }

   .fixedwidth {
    width: 100%;
    margin:0 auto;
    }

   #logodiv img {
    width: 5.1875em;
    height: 1.4375em;
   }

    #logodiv {
    padding-top: 8.5px;
    padding-left: 80px;
    float: left;
    border-right: 1px solid #CCCCCC;
    padding-right: 10px;
    height: 31px;
   }

    #signindiv img {
    width: 1.46470588em;
    height: 1.2075em;
    position: relative;
    top: 2px;
   }

   #signindiv {
    font-weight: bold; 
    font-size: 0.9em;
    padding: 10px 0 10px 20px;
    float: left;
    width: 150px;
    border-right: 1px solid #CCCCCC;
   }

   #topmenudiv {
    float: left;   
   }

   #topmenudiv ul {
    margin-top: 0;
    padding: 0;
   }

   #topmenudiv li {
    list-style: none;
    font-weight: bold;
    font-size: 0.9em;
    padding: 14px 20px 10px 20px;
    height: 100%;
    border-right: 1px solid #CCCCCC;
    float: left;
   }

   #searchdiv {
    float: left;
    padding: 7px 0 0 10px;
   }

   #searchdiv input {
    height: 24px;
    position: relative;
    border: none;
    width: 100%;
    background-color: #e4e4e4;
    font-family: Arial,Helvetica,freesans,sans-serif;
    font-weight: bold;
    font-size: 0.9em;
    padding-left:10px;
    background-image: url("images/magnify.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 30px 24px;
   }

   .break {
    clear: both;   
   }

   #newsbar {
    background-color:#BB1919;
    width: 100%;
    height: 95px;
    color: black;
    }

   #newsbar p{
    padding-left: 80px !important;
    margin: 0;
    padding: 5px 0 0 6px;
    color: white;
   }

   #newsheader{
    font-size: 2.7em;
   }

   #topicmenu {

   }

   #topicmenu ul {
    background-color: #A91717;
    padding: 5px 0 0 70px;
    margin-top: 7px;
    height: 29px;

   }

   #topicmenu li {
    list-style: none;
    float: left;
    background-color: none;
    border-right: 1px solid #BB4545;
    padding: 0 10px 0 10px;
    margin-top: 4px; 
    color: white;
   }

   #white{
    border-bottom: 4px solid white; 
    border-right: none !important;
    margin-top: 7px !important;
   }

   #nextToWhite{
    border-left: 1px solid #BB4545;
   }

   #moveUp{
    margin-top: -1px;
    margin-bottom: 1px;
   }

   #locationbar ul{
    background-color: none;
    height: 35px;
    width: 911px;
    padding: 7px 81px 0 75px;
    margin: 5px 136px 0 0px;
   }

   #locationbar li{
    list-style: none; 
    float: left;
    padding: 0 12px 0 12px;
    font-family: inherit;
    border-right: 1px solid #DCDCDC;
    font-size: 0.9em;
   }

   #selectedlocation{
    font-weight: bold;
    font-size: 1.1em !important;
    border-right: none !important;
    margin-top: -2px;
    border-bottom: 4px solid #BB1919;
    padding-left: 8px !important;
   }

   #nextToUkLocation{
    border-left: 1px solid #DCDCDC;
   }

   #primarycolumn{
    background-color: cornflowerblue;
    width: 100%;
    padding-left: 80px;
   }
</style>

</head>

<body>

<div id="container">

    <div id="topbar">

        <div class="fixedwidth">

            <div id="logodiv">
                <img src="images/bbclogo.png" />
            </div>

            <div id="signindiv">
                <img src="images/signin.png" /> Sign In
            </div>

            <div id="topmenudiv">

            <ul>
                <li>News</li>
                <li>Sport</li>
                <li>Weather</li>
                <li>Shop</li>
                <li>Earth</li>
                <li>Travel</li>
                <li>More...</li>
            </ul>

            </div>

            <div id="searchdiv">
                <input type="text" placeholder="search"/>
            </div>

        </div>

    </div>

    <div class="break"></div>

     <div id="newsbar">

        <div class="fixedwidth">
            <p id="newsheader">NEWS</p>


         <div class="break"></div>

         <div id="topicmenu">

            <ul>
                <li>Home</li>
                <li>Video</li>
                <li>World</li>
                <li>US &amp; Canada</li>
                <li id="white">
                    <div id="moveUp">UK</div></li>
                <li id="nextToWhite">Business</li>
                <li>Tech</li>
                <li>Science</li>
                <li>Magazine</li>
                <li>Entertainment &amp; Arts</li>
                <li>Health</li>
                <li style="border-right:none">More</li>
             </ul>

         </div>
         </div>
    </div>

    <div class="break"></div>

    <div id="locationbar">
        <div class="fixedwidth">
            <ul>
                <li id="selectedlocation">UK</li>
                <li id="nextToUkLocation">England</li>
                <li>N. Ireland</li>
                <li>Scotland</li>
                <li>Wales</li>
        <li style="border-right: none">Politics</li>
             </ul>

    </div>

    <div class="break"></div>

    <div id="primarycolumn">

       <div class="fixedwidth"> 

    <h2>UK to accept 'thousands' more refugees</h2>

           <img src="images/headlineimage.jpg" />

        </div>

    </div>    
    </div>
</div>

Answer 1

将此添加到您的正文标签中。您需要限制包含元素的最小宽度，以防止元素因页面调整而向下移动：

body {
    ...
    min-width: 1150px;
    ...
}

这会将页面锁定在 1150 像素（在您的测试页面上测试过的像素大小），因此当页面小于 1150 像素时，它会停止收缩 body 以及 body[= 中包含的元素13=]

Answer 2

为您的 .fixedwidth 使用特定宽度 class 而不是百分比。

不过，您可以沿着响应路线走下去 ;)

Answer 3

将此添加到您的 body{} 查看 fiddle http://jsfiddle.net/DIRTY_SMITH/1j7xter3/8/

   body {
    margin: 0;
    background-color: white;
    font-family: Arial,Helvetica,freesans,sans-serif;
    overflow: scroll;
    width: 1200px; 
    }

更改屏幕大小时如何防止 div 移动到位？

How do i prevent the divs from moving out of place when changing screen size?

html

css

position