Question

有人可以告诉我如何在浏览器调整大小时保持我的菜单项（顶部的黑条）缩小并保持在屏幕上？

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

感谢任何帮助，谢谢：）

Answer 1

问题出在你的CSS中。你已经定义了所有div的宽度（以像素为单位）。将其更改为％，如给.navigation width:100%等等。像这样...... Codepen example with width in %

Answer 2

我喜欢将所有内容包装在div中，并将宽度设置为屏幕大小的百分比。

因此，如果您要在背景中的所有内容周围创建div并将其称为<div id = "all-content"></div>

然后将其设为样式

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

然后你的所有内容都应放在＆＃34;框中。随着屏幕尺寸的缩小和扩展，无论如何它都会占据屏幕的90％。这就是我至少如何做到的。

调整浏览器大小时文本不会停留在屏幕上

2 个答案: