Question

我的代码出现问题。我有一个固定的菜单栏，它可以正常工作，但是当我改变窗口的大小时它不会调整大小。我需要它来调整大小，因为如果你改变窗口大小，它将不会水平滚动，一些按钮被切断。我怎样才能解决这个问题？

也可以随意对不必要的代码进行优化或输入感谢

body {
	margin: 0px;
	padding: 0px;
	background: url(images/gradient.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

section {
	margin: 0 auto;
	border: 1px solid #000000;
	border-radius: 8px;
	background:#E5E7E9;
	width: 958px;
	height: 800px;
}

.bpic {
	width: 200px;
	height: 350px;
	margin: 0px;
}

.biopic {
	border: 2px solid #ddd;
	border-radius: 8px;
	padding: 5px;
	width: 200px;
	height: 350px;
	margin: 40px 40px 40px 375px;
}

.bio {
	margin: 40px;
	font-family: verdana;
	text-align: center;
}

#biography {
	font-family: arial black;
	font-size: 120%;
	text-align: center;
	border: 2px solid #ddd;
	border-radius: 8px;
	padding: 10px;
}

#assignments {
	font-family: arial black;
	font-size: 120%;
	text-align: center;
	border: 2px solid #ddd;
	border-radius: 8px;
	padding: 10px;
}

#projects {
	font-family: arial black;
	font-size: 120%;
	text-align: center;
	border: 2px solid #ddd;
	border-radius: 8px;
	padding: 10px;
}

#contact {
	font-family: arial black;
	font-size: 100%;
	text-align: center;
	border: 2px solid #ddd;
	border-radius: 8px;
	padding: 10px;
}

.email {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 5px;
	width: 150px;
	height: 96px;
	margin: 3px 40px 3px 400px;
}

.banner {
	width: 960px;
	height: 143px;
	margin: 0 auto;
	padding: 0px;
	background: url(images/banner.png) no-repeat;
}

.banner h2 {
	font-family: vollkorn;
	font-size: 350%;
	color: white;
	text-transform: uppercase;
	margin: 0;
	position: relative;
	top: -40%;
	left: 83%;
	transform: translate(-50%, -50%);
}

.menu {
	list-style-type: none;
    margin: auto;
    background-color: #333;
    width: 100%;
    background: url(images/menu.jpg) repeat-x;
    position: fixed;
    min-width: 1080px;
	z-index: 1;
	display: inline-block;
}

.menu ul {
	float: left;
	margin: 0px;
	padding: 0 0 0 30%;
	list-style: none;
}

.menu ul li {
	padding: 0px;
	display: inline;
}

.menu ul li a {
    position: relative;
    float: center;
    display: inline-block;
    height: 30px;
    width: 180px;
    text-align: center;
    padding: 12px 0 0 0;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    outline: none;
    min-height: 24px;
}

.menu li a:hover, .menu li .current {
	position: relative;
	color: #ffffff;
	background: url(images/menuhoverright.jpg) top right no-repeat;
}

.menu li a:hover span, .menu li .current span	{
	position: absolute;
	display: inline-block;
	width: 15px;
	height: 42px;
	top: 0;
	left: 0;
	background: url(images/menuhoverleft.jpg) no-repeat;
}

.jprop {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 5px;
	width: 200px;
	height: 195px;
	margin: 40px;
}

.jprop:hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<!DOCTYPE html>
<html>

	<head>
		<!-- Homepage
			 My Biography Page
			 Author: 
			 Date: 01/29/2017
		-->
		<meta charset="UTF-8" />
		<title>Homepage</title>
		<script src="modernizr-1.5.js"></script>
		<link href="homestyles.css" rel="stylesheet" type="text/css" />
	</head>
	
	<body>
		<div class="menu">
			<img src="images/menu.jpg" alt="menu" />
			<ul>
				<li><a href="#biography"><span></span>Biography</a></li>
				<li><a href="#assignments"><span></span>Assignments</a></li>
				<li><a href="#projects"><span></span>Projects</a></li>          
				<li><a href="#contact"><span></span>Contact</a></li>
			</ul>   
		</div>
		
		<div class="banner">
			<img src="images/banner.png" alt="banner" />
			<h2>K V</h2>
		</div>
	
		<section>
			<div id="biography">
			<a name="biography"><h1>Biography</h1>
			</div>
			
			<div class="biopic">
			<img src="images/biopic.jpg" width="230" height="490" alt="biopic" class="bpic"/>
			</div>
			
			<article>
				<div class="bio">
				<p>Hello, my name is &&&&&&. --
				</p>
				<p>I am currently pursuing my A.S. degree in computer information technology at?I plan to start 
				   working in the field of IT, once I obtained my A.S. degree and certifications. While working, I plan on 
				   continuing my education to obtain my bachelor’s degree in IT at UCF. I have always had a passion for 
				   technology, especially computers. To be able to work in the field that I enjoy is one of my life goal.  
				</p>
				</div>
			</article>
		</section>
		<br>
		<section>
			<div id="assignments">
			<a name="assignments"><h1>Assignments</h1>
			</div>
			<div class="jprop">
			<a href="Jprop/basic.html">
				<img src="images/jprop.JPG" alt="jprops">
			</a>
			</div>
		</section>
		<br>
		<section>
			<div id="projects">
			<a name="projects"><h1>Projects</h1>
			</div>
		</section>
		<br>
		<section style="max-height: 210px;">
			<div id="contact">
			<a name="contact"><h1>Contact</h1>
			</div>
			<div class="email">
			<a href="mailto:REDACTED">
				<img src="images/email.png" alt="emails">
			</a>
			</div>
		</section>
		<br>
	</body>
	
</html>

Answer 1

来自样式表的这一点css将使菜单不会在1080px以下调整大小。因此，对于许多平板电脑和手机来说，它太宽了。

   .menu {
        min-width: 1080px;
    }

删除min-width属性，看看是否为您修复了它。

窗口调整大小时，我的菜单栏不会调整大小

1 个答案: