導航欄不能縮放屏幕尺寸

-1

我正在爲自己的網站工作，我在導航欄中遇到了一些問題。當該網站是全屏它看起來像這樣：（沒有足夠的代表，發佈圖片：P） https://gyazo.com/62a6d5f0869620bfc5cb1e210afaee2a 但是當我縮放窗口它最終搞亂像這樣： https://gyazo.com/e1efb1e9a9b9795bc1a57876c8bd0bc7 導航欄不能縮放屏幕尺寸

我有使用百分比儘可能的，但我不知道如何解決它定義的區域，任何幫助將是巨大的

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title> Jake Learman </title> 
     <link rel="stylesheet" href="stylesheet.css"> 
     <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display" rel="stylesheet"> 
    </head> 
    <body> 
     <div class="navBar" id="navBar"> 
      <ul> 
       <li><a href="#CV">CV</a></li> 
       <li><a href="#work">Work</a></li> 
       <li><a href="#contact">Contact</a></li> 
       <li><a href="#morestuff">Stuff</a></li> 
      </ul> 
     </div> 
     <div class="title" id="title"> 
      <br> 
      <img src="/images/profile.jpg" alt="Profile Picture"> 
      <br> 
      <br> 
      <h2> Jake Learman </h2> 
      <h3> Computer Science Student/Guitarist </h3> 
      <h4> <a href="#todo"> Contact</a>  <a href="/JakeLearmanCV.pdf" download> Download CV </a></h4> 
     </div> 
    </body> 
</html> 

And the CSS: 

    html, body{ 
     height: 100%; 
     margin:0; 
     padding:0; 
    } 

    h2{ 
     font-size: 45px; 
     font-family: 'Sedgwick Ave Display', cursive; 
     text-align: center; 
    } 

    h3{ 
     font-size: 35px; 
     font-family: 'Sedgwick Ave Display', cursive; 
    } 

    h4{ 
     font-size: 25px; 
     font-family: 'Sedgwick Ave Display', cursive; 
     text-align: center; 
    } 

    .navBar{ 
     background-color: #18121E; 
     color: #DDDDDD; 
     font-size: 30px; 
     font-family: 'Sedgwick Ave Display', cursive; 
     width: 100%; 
     margin:auto; 
     height:auto; 
     text-align: center; 
    } 

    .title{ 
     background-color: #18121E; 
     color: #DDDDDD; 
     font-family: 'Sedgwick Ave Display', cursive; 
     width: 100%; 
     height: 100%; 
     padding: 10px; 
     text-align: center; 
    } 

    img{ 
     border-radius: 50%; 
    } 

    ul { 
     display: inline-block; 
     list-style-type: none; 
     margin: 0; 
     padding-left: 40%; 
     padding-right: 40%; 
     overflow: hidden; 
     background-color: #233237; 
    } 

    li { 
     float: left; 
     border-right: 1px solid #bbb; 
    } 

    li a { 
     display: block; 
     color: white; 
     text-align: center; 
     padding: 14px 16px; 
     text-decoration: none; 
    } 

    li a:hover { 
     background-color: #111; 
    } 

    a{ 
     color: #ff3333 
    }

來源

2017-09-15 Jake Learman

您可以將最小寬度添加到正文，以便在需要時顯示水平滾動條。 'body {min-width：500px}'，你可以用px，em或者你喜歡的任何東西來定義它。 – LinkinTED

你想讓鏈接保持在一行，或者在屏幕縮小時換行？ –

@ G.Hunt我試圖保持它在一條線上 –

你可能要要實施奠定了導航欄的Flexbox的模型。首先，讓我們更新了ul規則的CSS：

ul { 
    display: flex; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    /* padding-left: 40%; */ 
    /* padding-right: 40%; */ 
    overflow: hidden; 
    background-color: #233237; 
}

然後導航li規則：

li { 
    /* float: left; */ 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-right: 1px solid #bbb; 
}

對於最終結果：

html, body{ 
 
     height: 100%; 
 
     margin:0; 
 
     padding:0; 
 
    } 
 

 
    h2{ 
 
     font-size: 45px; 
 
     font-family: 'Sedgwick Ave Display', cursive; 
 
     text-align: center; 
 
    } 
 

 
    h3{ 
 
     font-size: 35px; 
 
     font-family: 'Sedgwick Ave Display', cursive; 
 
    } 
 

 
    h4{ 
 
     font-size: 25px; 
 
     font-family: 'Sedgwick Ave Display', cursive; 
 
     text-align: center; 
 
    } 
 

 
    .navBar{ 
 
     background-color: #18121E; 
 
     color: #DDDDDD; 
 
     font-size: 30px; 
 
     font-family: 'Sedgwick Ave Display', cursive; 
 
     width: 100%; 
 
     margin:auto; 
 
     height:auto; 
 
     text-align: center; 
 
    } 
 

 
    .title{ 
 
     background-color: #18121E; 
 
     color: #DDDDDD; 
 
     font-family: 'Sedgwick Ave Display', cursive; 
 
     width: 100%; 
 
     height: 100%; 
 
     padding: 10px; 
 
     text-align: center; 
 
     box-sizing: border-box; 
 
    } 
 

 
    img{ 
 
     border-radius: 50%; 
 
    } 
 

 
    ul { 
 
     display: flex; 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #233237; 
 
    } 
 

 
    li { 
 

 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border-right: 1px solid #bbb; 
 
    } 
 

 
    li a { 
 
     display: block; 
 
     color: white; 
 
     width: 100%; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
    } 
 

 
    li a:hover { 
 
     background-color: #111; 
 
    } 
 

 
    a{ 
 
     color: #ff3333 
 
    }

<div class="navBar" id="navBar"> 
 
      <ul> 
 
       <li><a href="#CV">CV</a></li> 
 
       <li><a href="#work">Work</a></li> 
 
       <li><a href="#contact">Contact</a></li> 
 
       <li><a href="#morestuff">Stuff</a></li> 
 
      </ul> 
 
     </div> 
 
     <div class="title" id="title"> 
 
      <br> 
 
      <img src="/images/profile.jpg" alt="Profile Picture"> 
 
      <br> 
 
      <br> 
 
      <h2> Jake Learman </h2> 
 
      <h3> Computer Science Student/Guitarist </h3> 
 
      <h4> <a href="#todo"> Contact</a>  <a href="/JakeLearmanCV.pdf" download> Download CV </a></h4> 
 
     </div>

或找到小提琴here。

來源

2017-09-15 13:42:56

修復它謝謝xD –

好！樂意效勞。 –

導航欄不能縮放屏幕尺寸

回答

相關問題