Ul不適合導航-有解無憂

大家晚安，我在將我的 ul 安裝在導航上時遇到了麻煩，因為正如您在影像中看到的那樣，它只是超出了導航范圍。我希望它就在“徽標”文字“Diefonro”旁邊。有誰知道如何修理它？

[圖片][1]：https://i.stack.imgur.com/hsZUw.png

這是 HTML 和 CSS 代碼：

<html lang="en">
 
  <body>
    <header>
      <nav>
        
          <p class="gradient-text">Diefonro</p>
        
        
          <ul class="nav-list">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Portfolio</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
          </ul>
        
      </nav>
    </header>
  </body>
</html>

*{
  margin: 0;
}
nav{
  display: block;
  background-color: #fff;
  box-shadow: 1px 1px 5px rgba(51, 51, 51, 0.266);
  height: 3.2em;
  width: 100%;
}
ul.nav-list{
  list-style: none;
  width: 100%;
  margin-left: 35%;
}

ul.nav-list li{
  display: block;
  float: left;
  padding: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

nav a{
  padding-bottom: 1%;
  text-decoration: none;
  color: #333;
}


  [1]:

uj5u.com熱心網友回復：

.gradient-text {
 float: left;
}

uj5u.com熱心網友回復：

1）nav如果你想要回應式設計，你不應該給出一個特定的高度

/* height: 3.2em; */     // Remove the height

2）你可以flexbox在這里使用

nav {
  ...
  display: flex;
  align-items: center;
  ...
}

* {
  margin: 0;
}

nav {
  /* display: block; */
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 1px 1px 5px rgba(51, 51, 51, 0.266);
  /* height: 3.2em; */
  width: 100%;
}

ul.nav-list {
  list-style: none;
  width: 100%;
  /* margin-left: 35%; */
}

ul.nav-list li {
  display: block;
  float: left;
  padding: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

nav a {
  padding-bottom: 1%;
  text-decoration: none;
  color: #333;
}

<header>
  <nav>

    <p class="gradient-text">Diefonro</p>


    <ul class="nav-list">
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Services</a>
      </li>
      <li>
        <a href="#">Portfolio</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>

  </nav>
</header>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/322083.html

標籤：html css

上一篇：如何使影片目標成為不觸發它的元素？[復制]

下一篇：導航欄中的HTML幻燈片錯誤位置