即使在使用相同的 CSS 后，顶部和底部网站导航栏也无法正常工作

Question

我已经完成主网页的编码，如下所示：

通过使用相同的 HTML 并与相同的 CSS 链接，我创建了摄影 HTML，方法是删除主要的汽车图像并插入使用 Carousel 幻灯片效果制作的图像.

然而，即使我使用相同的 CSS 和相同的 HTML 格式，导航栏仍然表现得很奇怪，如下所示：

如图所示，右上角的导航已经向左移动，而底部的图标图像没有显示，只有白色背景...

我以为是Carousel里面图片大小的问题，所以调整了大小，但是还是不行。

HTML 主页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="monday.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>J[a]son</title>
</head>
<body>
    <nav>
        <div class = "logo">
            <h4>J[a]son</h4>
        </div>
        <ul class = "nav-links">
            <li>
                <a href="#">HOME</a>
            </li>
            <li>
                <a href="#">PHOTOGRAPHY</a>
                <ul class="sub-menu">
                    <li><a href="photography_colour_tuesday.html">Colour</a></li>
                    <li><a href="photography_black.html">Black</a></li>
                </ul>
            </li>
            <li>
                <a href="#">CODING</a>
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
        </ul>
        <div class= "burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
    <script src="testing.js"></script>
    <div class="main_car_wrapper">
        <img class="main_car" src="Photos/main_car.jpg" alt="car" width="100%" height="100%"/>

    </div>
           <!--<p>June, 2020. Sunshine Coast, BC, Canada </p>-->
    <div class ="bottom">
        <div class = "logos">
            <a href="https://github.com/j-ahn94" target="_blank" class="fa fa-github"></a>
            <a href="https://whosebug.com/users/14266888/jason-a" target="_blank" class="fa fa-stack-overflow"></a>
            <a href="https://www.linkedin.com/in/jasonja-ahn/" target="_blank" class="fa fa-linkedin"></a>
            <p id = "paragraph">TESTING</p>
        </div>
    </div>
</body>
</html>

HTML摄影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="monday.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>J[a]son</title>
</head>
<body>
    <nav>
        <div class = "logo">
            <h4>J[a]son</h4>
        </div>
        <ul class = "nav-links">
            <li>
                <a href="#">HOME</a>
            </li>
            <li>
                <a href="#">PHOTOGRAPHY</a>
                <ul class="sub-menu">
                    <li><a href="photography_colour.html">Colour</a></li>
                    <li><a href="photography_black.html">Black</a></li>
                </ul>
            </li>
            <li>
                <a href="#">CODING</a>
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
        </ul>
        <div class= "burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
    <script src="testing.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <!--<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">-->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-75" src="Photos/carousel.JPG" alt="First slide">
            <p>November, 2019. Seattle, USA.</p>
          </div>
          <div class="carousel-item">
            <img class="d-block w-75" src="Photos/statute.JPG" alt="Second slide">
            <p>June, 2020. Kelowna, BC.</p>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
    <div class ="bottom">
      <div class = "logos">
        <a href="https://github.com/j-ahn94" target="_blank" class="fa fa-github"></a>
        <a href="https://whosebug.com/users/14266888/jason-a" target="_blank" class="fa fa-stack-overflow"></a>
        <a href="https://www.linkedin.com/in/jasonja-ahn/" target="_blank" class="fa fa-linkedin"></a>
      </div>
    </div>
</body>
</html>

CSS（对所有HTML使用）：

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background-color: black; /*rgb(241, 233, 233);*/
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    
}

nav {
    display: flex;
    justify-content: space-between;
    /*padding-right: 2em;*/
    padding-left: 2em;
    padding-top: 2em;
    padding-bottom: 1.5em;
    align-items: center;
    min-height: 8vh;
    background-color: black;
    /*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
    font-family: 'Poppins', sans-serif;
}

.logo {
    background-color: black;
    color: rgb(240, 235, 235);
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: white;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 11px;
    /*padding: 5px 5px;*/
}

.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width:1430px) {
    .nav-links {
        width: 40%;
    }
}

@media screen and (max-width:950px) {
    body {
        overflow-x: hidden;
    }
    .nav-links {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: black;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 45%;
        transform: translateX(100%);
        padding-right: 2em;
        transition: transform 0.5s ease-in;
    }
    .nav-links li {
        opacity: 0;
    }
    .burger {
        display: block;
        padding-right: 1em;
    }
    .sub-menu {
        position: relative;
    }
}

.nav-active {
    transform: translate(0%);https://ahweb.org.uk/car.png
}

.main_car_wrapper {
    background-image: url(https://ahweb.org.uk/car.png);
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: contain;
    max-width: 100%;
    height: auto;
    padding-top: 6em;
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity :1;
        transform: translateX(0px);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);

}

.sub-menu {
    display: none;
}

.sub-menu li a {
    /*display: block;*/
    text-decoration: none;
    color: white;
    border-top: 1px solid white;
    background: rgb(221, 215, 215);
    white-space: nowrap;
    top: 40px;
    left: 25px;
    padding: 5px;
    padding-top: 1px;
}

.sub-menu li a:hover{
    background: rgb(10, 10, 10);
    opacity: 1;
    transition: all 0.5s ease;   
}

li:hover ul {
    display: flex;
    position: absolute;
}

li:hover li {
    float: none;
    font-size: 8px;
}

li:hover a {
    background: rgb(5, 5, 5);
}

li:hover li a:hover {
    background: rgb(19, 18, 18);
}

.bottom {
    margin-top: auto; 
}

.logos {
    display: flex;
    flex-direction: row;
}

.logos a {
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-size: 17px;
}

.carousel-inner p {
    text-align: center;
    color: black;
    font-size: 14px;
}

.carousel-inner {
    background-color: black;
}

.carousel-inner img {
    display: block;
    margin: 0 auto;
    width: 60vw;
    max-height: auto;
    align-items: center;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

JavaScript

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  //Toggle Nav
  burger.addEventListener('click', () => {
    //Toggle Nav
    nav.classList.toggle('nav-active');

    //Animate Links
    navLinks.forEach((link, index) => {
      if(link.style.animation) {
        link.style.animation = ''
      } else {
          link.style.animation = `navLinkFade 0.2s ease forwards ${index / 7 + 0.5}s`;
      }
    });
    //Burger Animation
    burger.classList.toggle('toggle');
  });
  //Animate Links
  
}

navSlide();

Answer 1

问题是由于您的 HTML 对 nav 元素使用了不同的样式。

将 nav 更改为显示为 flex 应该可以解决问题。

HTML 主页

导航元素显示为 flex。

HTML摄影

导航元素显示为块。这是因为您使用了 bootstrap 库。

即使在使用相同的 CSS 后，顶部和底部网站导航栏也无法正常工作

Both top and bottom website Navigation Bar is not functioning properly even after using the same CSS

html

css

navigation

alignment

navbar