Question

我知道还有其他类似的问题已得到解答，但它们并不适合我的需要。我的问题是，每当我缩小页面超过某一点（任何低于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的菜鸟，我在这里的一些代码是在紧张的时候从其他人那里复制过来的。我需要尽快提交给我正在尝试实习的人，以便快速回复，我将非常感激。谢谢。

PS：我刚刚发现缩放选项只会混淆Chrome中的链接位置，但是当我在Safari中尝试时它没有出现。我还没有尝试放大和缩小IE，看看它是如何工作的。这是一个JSFiddle

Answer 1

大屏幕和缩放窗口不相同。别担心老兄。一切都很好..

Answer 2

您可以用百分比或em

来定义宽度高度等

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

2 个答案: