在調整瀏覽器大小時，文字不能保留在屏幕上

有人能告訴我如何讓我的菜單項（頂部的黑色條）保持縮小並在瀏覽器調整大小時保持在屏幕上？在調整瀏覽器大小時，文字不能保留在屏幕上

正如你可以從this picture看到的那樣，圖像和菜單欄切斷了屏幕，而不是變得更小，有沒有簡單的解決方法呢？

CSS：

@import url('https://fonts.googleapis.com/css?family=Bree+Serif'); 

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    background-color: white; 
} 

.navigation { 
    width: 1280px; 
    height: 60px; 
    background-color: black; 
    position: absolute; 

} 

.menu { 
    display: inline-block; 
    color: white; 
    float: right; 
} 


#Rosa { 
    color: White; 
    font-family: Arial Black; 
    width: 100px; 
    height: 25px; 
    min-height: 5px; 
    padding: 2px; 
    border-bottom: 1px solid white; 
    border-top: 1px solid white; 
    overflow: hidden; 
    margin: 14px 1165px; 
    position: absolute; 

} 

#Martin { 
    color: White; 
    font-family: Arial Black; 
    width: 147px; 
    height: 25px; 
    padding: 2px; 
    border-bottom: 1px solid white; 
    border-top: 1px solid white; 
    overflow: hidden; 
    margin: 14px 995px; 
    position: absolute; 



} 

#Malcom { 
    color: white; 
    font-family: Arial Black; 
    width: 87px; 
    height: 25px; 
    padding: 2px; 
    border-bottom: 1px solid white; 
    border-top: 1px solid white; 
    overflow: hidden; 
    margin: 14px 885px; 
    position: absolute; 
} 

#Design { 
    color: white; 
    font-family: Arial Black; 
    width: 60px; 
    height: 25px; 
    padding: 2px; 
    border-bottom: 1px solid white; 
    border-top: 1px solid white; 
    overflow: hidden; 
    margin: 14px 800px; 
    position: absolute; 
} 

#BlackTitle { 
    color: white; 
    font-family: "Bree Serif", "serif"; 
    width: 380px; 
    height: 50px; 
    float: right; 
    font-size: 40px; 
    padding: 10px; 
    overflow: hidden; 
    margin: -8px 250px; 
    letter-spacing: 2px; 
    position: absolute; 
} 


.navigation a { 
    text-decoration: none; 
    color: black; 
} 

#Fist { 
    max-height: 3.77em; 
    float: left; 
    margin-right: 5px; 
    position:absolute; 
} 

#MPic { 
    width: 1280px; 
    height: 91%; 
    margin-top: 60px; 
    position: absolute; 
}

HTML：

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
     <link href="stylesheet.css" type="text/css" rel="stylesheet"/> 

     <title>Black People in American</title> 

     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

<meta name="viewport" content="width=device-width; initial-scale=1.0" /> 

    </head> 

    <body> 

     <div class="navigation"> 
      <a href="../Page2/Page2.HTML"><div class="menu" id="Rosa"> Rosa Parks </div></a> 
      <a href="../Page3/Page3.HTML"><div class="menu" id="Martin">Martin Luther Jr.</div></a> 
      <a href="../page4/Page4.html"><div class="menu" id="Malcom">Maclom X</div></a> 
      <div class="menu" id="Design">Design</div> 
      <div class="menu" id="BlackTitle"> Black History Site</div> 

      <a href="Website.html"> <img id="Fist" src="../Assets/Fist.png" alt="White Fist"/></a> 

     </div> 

     <img id="MPic" src="../Assets/Luther.jpg" alt="Martin Speaking to Crowd"/> 



    </body> 
</html>

任何幫助表示讚賞，謝謝:)

來源

2017-04-16 ImperfectLion

保證金和定位問題是你的代碼的主要問題[https://www.w3schools.com/howto/howto_js_topnav.asp]試試這個例子，你將獲得更好的關於navbar的知識 –

問題是在你的CSS。你必須定義像素的所有div的寬度..其更改爲類似％給予.navigation width:100%等.. 事情是這樣的...... Codepen example with width in %

來源

2017-04-16 20:30:06

我喜歡做的是總結我的所有內容一個div並將寬度設置爲屏幕大小的百分比。

因此，如果您要創建周圍的一切div的，背景裏面並調用它說<div id = "all-content"></div>

然後風格它像這樣

#all-content { 
    width:90%; 
    margin:auto; 
}

然後所有的內容應該是在「盒子「隨着屏幕尺寸的縮小和擴展，無論如何它都佔用了屏幕的90％。至少我是這樣做的。

來源

2017-04-16 20:35:14 rustinpeace91

在調整瀏覽器大小時，文字不能保留在屏幕上

回答

相關問題