在调整浏览器大小时，文字不能保留在屏幕上

有人能告诉我如何让我的菜单项（顶部的黑色条）保持缩小并在浏览器调整大小时保持在屏幕上？在调整浏览器大小时，文字不能保留在屏幕上

正如你可以从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

在调整浏览器大小时，文字不能保留在屏幕上

回答

相关问题