我正在制作的網站導航欄的小CSS出錯

我在使用網站導航欄的 CSS 時遇到問題。請幫助我將專案移到右側并處理回應性問題。

HTML：

<nav>
        <a href="#" class="logo"><img src="./images/logo.png" height="120" width="120"></a>
        <ul>
          <li><a class="active" href="#">Home</a></li>
          <li><a href="#">How to MUN</a></li>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
    </nav>

CSS：

body, html {
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color: #666;
}

nav {
    position: absolute;
    display: flex;
    align-items: center;
    padding: 30px 90px;
    z-index: 99;
  }
  
  nav .logo {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  
  nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  nav ul li {
    list-style: none;
    margin-left: 20px;
  }
  
  nav ul li a {
    text-decoration: none;
    padding: 6px 15px;
    color: #ffff;
    border-radius: 20px;
  }
  
  nav ul li a:hover,
  .active {
    background: #fff;
    color: #2b1055;
  }

我已經嘗試了很多次，但我無法解決問題。這些專案總是粘在一起。

uj5u.com熱心網友回復：

body,
html {
 height: 100%;
 margin: 0;
 font-size: 16px;
 font-family: "Lato", sans-serif;
 font-weight: 400;
 line-height: 1.8em;
 color: #666;
}


nav {
 position: relative;
 background: rgb(31, 30, 30);
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 30px 90px;
 z-index: 99;
}

nav .logo {
 color: #fff;
 font-weight: 700;
 text-decoration: none;
 font-size: 2rem;
 text-transform: uppercase;
 letter-spacing: 2px;
}

nav ul {
 display: flex;
 justify-content: center;
 align-items: center;
}

nav ul li {
 list-style: none;
 margin-left: 20px;
}

nav ul li a {
 text-decoration: none;
 padding: 6px 15px;
 color: #fff;
 border-radius: 20px;
 white-space: nowrap;
}

nav ul li a:hover, .active {
 background: #fff;
 color: #2b1055;
}

/* breakpoint for mobile */
@media screen and (max-width: 768px) {
 nav {
  flex-direction: column;
  padding: 20px 0px;
 }
}

如果您想要更高級的回應式選單，您可以隱藏導航選單并添加漢堡按鈕，然后在單擊漢堡按鈕或使用一些 javascript/jquery 代碼時使用 css:focus 展開導航選單

uj5u.com熱心網友回復：

嘗試這個

我為回應式視圖添加了媒體查詢。當解析度低于 768px 時，導航欄變為列視圖

body, html {
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color: #666;
}

nav {
    display: flex;
    align-items: center;
    padding: 12px 90px;
    z-index: 99;
    background-color:#7c7c7c;
  }
  
  nav .logo {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  
  nav ul {
    display: flex;
    justify-content: right;
    align-items: center;
    width:100%;
  }
  
  nav ul li {
    list-style: none;
    margin-left: 20px;
  } 
  
  nav ul li a {
    text-decoration: none;
    padding: 6px 15px;
    color: #ffff;
    border-radius: 20px;
  }
  
  nav ul li a:hover,
  .active {
    background: #fff;
    color: #2b1055;
  }

@media only screen and (max-width: 767px){
  nav {
    flex-direction: column;
  }
  nav ul {
    flex-direction: column;
    padding:0px;
    margin-bottom:0px;
  }
  nav ul li{
    margin-left:0px;
    margin-bottom:5px;
  }
}

<nav>
     <a href="#" class="logo"><img src="https://images.unsplash.com/photo-1557053964-937650b63311?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=997&q=80" width="80"></a>
        <ul>
          <li><a class="active" href="#">Home</a></li>
          <li><a href="#">How to MUN</a></li>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
    </nav>

uj5u.com熱心網友回復：

首先，您需要使位置相對。

其次;

• 設定寬度為 100%
• 向右浮動并將邊距添加到您希望的像素數。

標籤：javascript html css

上一篇：如何縮進html中的復選框和單選按鈕？

下一篇：在使用flex和flex-basis定位元素的同時圍繞文本創建一個完美的圓圈