Question

我的代码问题只占用了一半的屏幕。它将填补左半部分而不是右边部分。我尝试将html的高度和宽度设置为100％，但它没有解决问题。这样做之后我也无法点击我的href到其他页面。任何帮助都会很棒。

        html {
        	margin: 0;
        	height: 100%;
        	width: 100%;
        }
        body {
        	background: #B2906F;
        	font-family: arial;
        	margin: 0;
        	height: 100%;
        }
        
        .picture{
        	display: inline;
        	margin: 0;
        	padding: 0;
        	position: fixed;
        	z-index: -1;
        	background-size: 100%
        }
        
        .button{
        	padding: 10px 15px;
        	text-decoration: none;
        	border-radius: 5px;
        	background-color: #05280c
        }
        .button-primary:hover {
        	background-color: #05370c
        }
        
        h1	{
        	display: inline;
        	margin: 0;
        	background-color: #2c421f;
        	padding: 5px;
        	position: absolute;
        }
        
        ul{
        	margin: 0;
        	display: inline;
        	padding: 0px 0px 0px 250px;
        }
        ul li {
        	display: inline-block;
        	list-style-type: none;
        	padding: 15px 10px;
        	color: #050c0c;
        	margin: 0;
        }
        
        ul li a {
        	color: black;
        }
        
        footer{
        	clear: both;
        }
        
        nav {
        	color: 
        	height: 40px;
        	margin: 0;
        	background-color: #2c421f;
        }

 <!doctype html>
        <html>
        	<head>
        		<title>NWWolfPack</title>
        		<link href="main.css" rel="stylesheet" />
        	</head>
        	
        	<body>
        		<h1>NW Wolf Pack</h1>
        		<div class="picture"><img src="camo.jpg" width="1000" height="150">
            	<header>	
        			<nav>
        				<ul>
        					<li class="button"><strong>Home</strong></li>
        					<li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li>
        					<li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li>
        					<li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li>
        				</ul>
        			</nav>
        		</header>
        	</body>
        	
        	
        	<footer>2017 Dillan Hall</footer>
        </html>

Answer 1

在主div中添加代码并添加宽度margin: 0 auto

.mainContainer{
    width:990px;
    margin: 0 auto;
}

第一个网站html只需要半页

1 个答案: