我如何將我在導航欄中寫的串列居中居中-有解無憂

我試圖將我在導航欄中的標簽 navlist 下創建的串列居中，這是一個帶有類 bar 的 div。你能告訴我怎么做嗎，下面是html和css代碼。導航欄是頂部的綠色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>
<body>
 <div class="bar">
   <nav>
     <ul class="navlist">
       <li><a href='#' class="link1">Search</a></li>
       <li><a href='#' class="link1">Browse</a></li>
       <li><a href='#' class="link1">Tags</a></li>
       <li><a href='#' class="link1">Filter</a></li>
       <li><a href='#' class="link1">Dev</a></li>
     </ul>
    </nav>
 </div>
 </div>
</body>
</html>

*{
  margin: 0px;
}

.navlist{
  list-style: none ;
  display: flex ;
  background: red ;
  padding: 0px ;
  margin: 0px ;
  width: 300px
}

.bar{
  height:100px ;
  background: green ;
  justify-content: center
  
}

.link1{
  padding-left: 10px;
  text-decoration: none ;
  color: black ;
  font-size: 20px
}

uj5u.com熱心網友回復：

請添加 'margin: 0 auto;' 到 .navlist

uj5u.com熱心網友回復：

當您使用justify-content和/或align-items，你需要添加 display: flex;到

* {
  margin: 0;
}


/* you don't need a div, you can just use the nav*/

nav {
  height: 100px;
  background: green;
  display: flex;
  
  /* this is for centering it horizontally */
  justify-content: center;
  
  /* this is for centering it vertically */
  align-items: center;
}

.navlist {
  list-style: none;
  display: flex;
  background: red;
  padding: 0px;
  margin: 0px;
  width: 300px;
}

.link1 {
  padding-left: 10px;
  text-decoration: none;
  color: black;
  font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>

<body>
  <nav>
    <ul class="navlist">
      <li><a href="#" class="link1">Search</a></li>
      <li><a href="#" class="link1">Browse</a></li>
      <li><a href="#" class="link1">Tags</a></li>
      <li><a href="#" class="link1">Filter</a></li>
      <li><a href="#" class="link1">Dev</a></li>
    </ul>
  </nav>
</body>

</html>

uj5u.com熱心網友回復：

為了實作這個解決方案，我將<nav>元素封裝在一個<div>容器中，并將<nav>元素放在應用specialContainer類樣式的頁面中間：

<style>
.specialContainer{
  display: flex;
  justify-content: center;
}
</style>

<div class="specialContainer">
    <nav></nav>
</div>

*{
  margin: 0px;
}

.navlist{
margin: 0 auto;
  list-style: none ;
  display: flex ;
  background: red ;
  padding: 0px ;
  margin: 0px ;
  width: 300px
}

.bar{
  height:100px ;
  background: green ;
  justify-content: center
  
}

.link1{
  padding-left: 10px;
  text-decoration: none ;
  color: black ;
  font-size: 20px
}

/* Added the following css class. */
.specialContainer{
  display: flex;
  justify-content: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>
<body>
 <div class="bar">
  <!-- The following element has been added. -->
   <div class="specialContainer">
     <nav>
       <ul class="navlist">
         <li><a href='#' class="link1">Search</a></li>
         <li><a href='#' class="link1">Browse</a></li>
         <li><a href='#' class="link1">Tags</a></li>
         <li><a href='#' class="link1">Filter</a></li>
         <li><a href='#' class="link1">Dev</a></li>
       </ul>
      </nav>
    </div>
 </div>
</body>
</html>

uj5u.com熱心網友回復：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

*{
    margin: 0px;
  }
  
  .navlist{
    list-style: none ;
    display: flex ;
    background: red ;
    padding: 0px ;
    /* margin: 0px ; */
    width: 300px
  }
  
  .bar{
    height:100px ;
    background: green ;
    justify-content: center;
    display: flex;
    justify-content: center; /* Horizontal */
    align-items: center; /* Vertical */
  }
  
  .link1{
    padding-left: 10px;
    text-decoration: none ;
    color: black ;
    font-size: 20px
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>
<body>
 <div class="bar">
   <nav>
     <ul class="navlist">
       <li><a href='#' class="link1">Search</a></li>
       <li><a href='#' class="link1">Browse</a></li>
       <li><a href='#' class="link1">Tags</a></li>
       <li><a href='#' class="link1">Filter</a></li>
       <li><a href='#' class="link1">Dev</a></li>
     </ul>
    </nav>
 </div>
 </div>
</body>
</html>

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

標籤：

上一篇：如何將CMS集合中的名稱顯示為單個段落，以逗號分隔

下一篇：使用'width'屬性切換選單