如何在页面缩小时阻止移动导航链接？

我知道还有其他类似的问题已经得到解答，但它们并不完全符合我的需要。我的问题是，每当我缩小页面超过某个点（任何低于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

如何在页面缩小时阻止移动导航链接？

回答

相关问题