时间戳

首页 > 解决方案 > 导航栏在屏幕上不是全宽？

html - 导航栏在屏幕上不是全宽？

问题描述

所以我正在重新创建一个我遇到的模板，需要一些帮助......

我希望顶部的导航栏覆盖屏幕的宽度，但是我目前拥有将其放入容器中的代码的方式。有什么建议我可以在不影响其余流程的情况下做到这一点吗？

在此处输入图像描述

    	body {
		margin:0;
	}

	.container {
		margin:auto;
		width:80%;
	}

	nav {
		background-color:black;
		color:white;
		font-size:25px;
		height:50px;
		opacity:0.5;

	}

	nav ul {
		margin-top:0;
	}

	nav ul li {
		display:inline;
	}

	nav ul li a {
		padding:30px;
		text-decoration:none;
	}

	nav p {
		margin-top:0;
	}

	.showcase,header {
		background-image:url("space.jpg");
		background-size:cover;
		height:500px;
	}

	@media (max-width: 1800px) {
		
		h1 {
			text-align:left;
		}
		
		nav ul   {
			display:none;
		}
	}
    <!DOCTYPE html>

    <html>

    <head>
	    <meta name="viewport" content="width=device-width" />
	    <title>Space Prospection</title>
	    <meta charset="utf-8" />
	    <link rel="stylesheet" href="styles.css" />
    </head>

    <body>
	<div class="container">	
	<div class="showcase">
			
			<nav>
				<a href="#">Space Prospection</a>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Projects</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>	

			

			<div class="main_content">
				<h1>Soyuz TMA-M <span>Spacecraft</span></h1>
				<button>Read More</button>
			</div>
			
			<div class="secondary_content">
				<h1>Featured Projects</h1>
				
			</div>
		
		</div>
	</div>
		
	</div>
	
    </body>

    </html>

提前致谢

标签： htmlcssnav

解决方案

.container应该是内部<nav>内容，或网站内部的任何内容，所以这是您的代码：

HTML：

<div class="showcase">
        <nav>
        <div class="container"> 
            <a href="#">Space Prospection</a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        </nav>  


    <div class="container"> 

        <div class="main_content">
            <h1>Soyuz TMA-M <span>Spacecraft</span></h1>
            <button>Read More</button>
        </div>

        <div class="secondary_content">
            <h1>Featured Projects</h1>

        </div>

    </div>
</div>

.container可以将所有网站内容保存在相同的宽度上，但不是所有的背景

推荐阅读