如何在頁面縮小時阻止移動導航鏈接？

我知道還有其他類似的問題已經得到解答，但它們並不完全符合我的需要。我的問題是，每當我縮小頁面超過某個點（任何低於50％的縮放比例）時，我的導航欄末端的1或2個鏈接會被推下到其餘部分下面的第二行。但是，當頁面處於正常或大尺寸時，不會發生這種情況。只有在縮放比例爲33％或25％時，鏈接也不會在窗口大小調整時更改大小或比例。我在CSS中使用了「.nav-style」和「a」各種「位置」的東西，但似乎沒有任何工作。如何在頁面縮小時阻止移動導航鏈接？

如何在導航欄右端的鏈接縮小並保持與頁面其餘部分的相對比例？

這裏是我的html：

<!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>Untitled Document</title> 
<link rel="stylesheet" href="style.css"> 
</head> 

<body> 

<div class="container"> 

    <div class="div1"> 
     <h1>ConSynth Corporation</h1> 
     <p></p> 

    <div class="nav-style"> 

     <p><a href="#">Home</a> 
      <a href="#">About Us</a> 
      <a href="#">Project Gallery</a> 
      <a href="#">News</a> 
      <a href="#">Contact Us</a> 
      <a href="#">Resources</a> 
     </p> 
    </div> 

    </div> 


    <div class="div2"> 
     <p></p> 
    </div> 


    <div class="div3"> 
     <p></p> 
    </div> 

    <div id="black-box"> 

     <div id="black-box-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum enim sem, gravida eu facilisis vel, mollis eget turpis. Morbi dignissim magna eu dui sagittis, ac semper enim ullamcorper. Phasellus scelerisque lobortis libero et laoreet. Vivamus suscipit erat sed quam consequat, pharetra dignissim ligula pharetra. Nulla a dui vel eros viverra rutrum sed at orci. Nullam id aliquam sem, in eleifend lectus. Integer non libero et eros sagittis tincidunt. Nam ornare, est sed dapibus auctor, lectus lorem luctus elit, at semper enim odio ac metus. Aliquam lacinia lacinia turpis et dapibus. 
<br /> 
<br /> 
Integer ac magna lobortis, dictum ligula sed, vestibulum urna. Cras eget placerat augue. Sed sit amet purus magna. Sed malesuada, nulla vitae consectetur posuere, diam odio accumsan metus, eget consectetur odio ante at velit. Etiam tincidunt justo at augue porttitor vulputate. Suspendisse hendrerit sit amet sem porta suscipit. Donec porta libero odio, non commodo orci faucibus at. Duis nisl erat, facilisis ut sem adipiscing, luctus scelerisque ante. Vestibulum felis dolor, porta eu nunc vel, sodales semper lorem. Curabitur varius lorem eget accumsan aliquam. Nam sem odio, condimentum et cursus nec, tempor id ipsum. 
<br /> 
<br /> 
Duis porttitor lacus a sem lacinia vestibulum nec quis neque. 
Fusce sit amet porttitor sem. Nunc a laoreet est. Pellentesque facilisis dolor augue, sit amet aliquam justo vehicula quis. Pellentesque interdum a augue et convallis. Integer augue quam, consectetur at tortor quis, pulvinar gravida dolor. Praesent eu volutpat lacus. Integer risus nisi, venenatis non blandit vitae, feugiat ac ipsum. Etiam eu congue velit. </p></div> 

     <div id="grey-login"> 
      <form id="usn"> 
       Username: <input type="username" name="usn"> 
      </form> 

      <form id="pwd"> 
       Password: <input type="password" name="pwd"> 
      </form> 

      <input type="submit" name="submit" value="Log In" id="submit" onclick="alert('Hello world!')"/> 

     </div> 

    </div> 

    </div> 

</body> 
</html>

這裏是我的CSS：

@charset "UTF-8"; 
/* CSS Document */ 

.container { 
    width: 1366px; 
    height: 1409px; 
    border: 2px solid black; 
    border-radius: 10px; 
    margin: auto; 
    positon: relative; 
    } 

.div1 { 
    width: 1366px; 
    height: 253px; 
    background-color: black; 
    margin-top: -68px; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    position: relative; 
    } 

.div2 { 
    width: 1366px; 
    height: 591px; 
    background-color: white; 
    margin: none; 
    } 

.div3 { 
    width: 1366px; 
    height: 550px; 
    background-color: #688E23; 
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px; 
    position: absolute; 
    z-index: 10; 
    } 

#black-box { 
    width: 1278px; 
    height: 437px; 
    background-color: black; 
    border-radius: 15px; 
    position: absolute; 
    z-index: 20; 
    margin-top: 30px; 
    margin-left: 45px; 
    } 

#black-box-text { 
    width: 730px; 
    height: 390px; 
    position: absolute; 
    z-index: 30; 
    color: white; 
    text-align: justify; 
    font-family: Arial,"Arial", Helvetica, sans-serif; 
    font-size: 24px; 
    margin-left: 470px; 
    padding-left: 10px; 
    padding-right: 45px; 
    overflow: auto; 
    } 

#grey-login { 
    width: 387px; 
    height: 382px; 
    background-color: #cfcfcf; 
    background-image: url('images/login-image.jpg'); 
    background-repeat: no-repeat; 
    background-position: 5% 5%; 
    border-radius: 15px; 
    margin-left: 30px; 
    margin-top: 25px; 
    position: relative; 
    } 

#usn { 
    max-width: 175px; 
    margin-left: 205px; 
    padding-bottom: 10px; 
    padding-top: 20px; 
    position: relative; 
    z-index: 40; 
    text-align:center; 
    } 

#pwd { 
    max-width: 175px; 
    margin-left: 205px; 
    padding-top: 20px; 
    padding-bottom: 10px; 
    position: relative; 
    z-index: 40; 
    text-align:center; 
    } 

input[type=username] { 
    border: 1px solid #999; 
    border-radius: 7px; 
    height: 30px; 
    min-width: 150px; 
    max-width: 150px; 

    -webkit-appearance: none; 
} 

input[type=password] { 
    border: 1px solid #999; 
    border-radius: 7px; 
    height: 30px; 
    min-width: 150px; 
    max-width: 150px; 

    -webkit-appearance: none; 
} 

#submit { 
    background-color: #353535; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius:6px; 
    color: #fff; 
    font-family: 'Arial'; 
    font-size: 20px; 
    text-decoration: none; 
    cursor: pointer; 
    border:none; 
    padding: 5px 20px; 
    margin-top: 20px; 
    margin-left: 150px; 
} 



#submit:hover { 
    border: none; 
    background: #DD1900; 
    box-shadow: 0px 0px 1px #777; 
} 

h1 { 
    font-family: Baskerville, Georgia, "Times New Roman", Times, serif; 
    color: #FFF; 
    font-size: 100px; 
    font-weight:100; 
    text-align:center; 
    margin-bottom:85px; 
    } 

a { 
    text-decoration: underline; 
    font-family: Arial, Helvetica, sans-serif; 
    color: white; 
    text-align: center; 
    margin: 0 35px; 
    font-size: 22px; 
    padding-left: 50px; 
    padding-top: 50px; 
} 

.nav-style { 
    position: relative; 
    }

我在HTML和CSS一個小白，和一些代碼在這裏，我從其他人複製當在一個捏。我需要把這個ASAP提交給一個我試圖獲得實習機會的人，這樣一個快速回復將非常感謝。謝謝。

PS：我剛剛發現，縮放選項只會弄亂Chrome中的鏈接位置，但在Safari中嘗試它時不會發生。我還沒有嘗試過放大和縮小IE瀏覽器，看它是如何工作的。這裏有一個JSFiddle

來源

2014-03-01 JPDesigner

方面通過放大你的意思改變瀏覽器窗口大小或字面上CMD +/-縮放？ – thesublimeobject

大屏幕和縮放窗口不一樣。別擔心。一切都OK了..

來源

2014-03-01 20:57:24 WebDevRon

我注意到這個問題只出現在一個網頁瀏覽器中，而沒有出現在任何其他網頁瀏覽器中，並且由於它的縮放比任何人都要用的縮小尺寸要小，所以我並不擔心它。感謝大家的幫助。 – JPDesigner

您可以定義寬度高度等百分比或EM

來源

2014-03-01 21:09:15

如何在頁面縮小時阻止移動導航鏈接？

回答

相關問題