导航栏不能缩放屏幕尺寸

-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 –

好！乐意效劳。 –

导航栏不能缩放屏幕尺寸

回答

相关问题