我正在关注 YouTube 教程,了解如何使用 CSS 在 HTML 上制作响应式导航栏,一切都很顺利,直到我尝试在屏幕中央添加文本,它出现在屏幕左侧(仅当窗口分辨率高于 952px 宽时)。我对 CSS 很陌生,我尝试修复它的所有内容似乎都不起作用。代码如下
* { padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body { font-family: montserrat; } nav { background: #0082e6; height: 80px; width: 100%; } label.logo { color: white; font-size: 35px; line-height: 80px; padding: 100px; font-weight: bold; } nav ul { float: right; margin-right: 20px; } nav ul li { display: inline-block; line-height: 80px; margin: 0 5px; } nav ul li a { color: white; font-size: 17px; padding: 7px 13px; border-radius: 3px; text-transform: uppercase; } a.active, a:hover { background: #1b9bff; transition: .5s; } .checkbtn { font-size: 30px; color: white; float: right; line-height: 80px; margin-right: 40px; cursor: pointer; display: none; } #check { display: none; } @media (max-width: 952px) { label.logo { font-size: 30px; padding-left: 50px; } nav ul li a { font-size: 16px; } } @media (max-width: 858px) { .checkbtn { display: block; } ul { position: fixed; width: 100%; height: 100vh; background: #2c3e50; top: 80px; left: -100%; text-align: center; transition: all .5s; } nav ul li { display: block; } nav ul li a { font-size: 20px; } a:hover, a.active { background: none; color: #0082e6; } #check:checked~ul { left: 0; } } section { background: url(bg1.jpeg) no-repeat; background-size: cover; height: calc(100vh - 80px); opacity: 20%; }
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> <meta charset="utf-8"> <meta name="viewport" content="width=device-widht,initial-sclae=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://kit.fontawesome.com/.js" crossorigin="anonymous"></script> <nav> <input type="checkbox" id="check"> <label for="check" class="checkbtn"> <i class="fas fa-bars"></i> </label> <label class="logo">Air</label> <ul> <li><a href='home.html'>Home</a></li> <li><a href='About.html'>About</a></li> <li><a href='Flights.html'>Flights</a></li> <li><a href='Contact.html'>Contact</a></li> </ul> </nav> <section> <h1 style="text-align:center;">test</h1> </section>
这解决了问题:将宽度设置为仅文本的宽度,然后通过
margin 0 auto
将容器对齐到中心。添加
section { 边框:1px 实心透明; }
也解决了这个问题。请参阅下面的代码片段。