有人能告訴我如何讓我的菜單項(頂部的黑色條)保持縮小並在瀏覽器調整大小時保持在屏幕上?在調整瀏覽器大小時,文字不能保留在屏幕上
正如你可以從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>
任何幫助表示讚賞,謝謝:)
保證金和定位問題是你的代碼的主要問題[https://www.w3schools.com/howto/howto_js_topnav.asp]試試這個例子,你將獲得更好的關於navbar的知識 –