CSS 導航欄 - 如何均勻間隔元素

Question

中心的導航欄元素中的空間不相等。 CSS 似乎也讓文本與其他元素重疊，例如，如果我寫“HOMEabcdefgh”，它將與下一個元素重疊，而不是均勻地間隔開。

此外，HOME 文本比元素文本的 rest 短，因此我們看到它與其下一個元素“DRESSES”之間有很多間距。 我想均勻地隔開所有中心元素。 請看圖片

 * { margin: 0; padding: 0; box-sizing: border-box; color: #b7b7b7; } body { background-color: black; } header { display: flex; justify-content: space-between; align-items: center; padding: 10px 10%; background-color: #332323; }.logo { cursor: pointer; color: white; font-size: large; }.nav_links a { display: inline-block; width: 20%; padding-left: 3%; padding-right: 10%; cursor: pointer; border-left: 1px solid white; margin-right: 30px; text-transform: uppercase; list-style-type: none; } li { min-width: 80px; }.button { background-color: #302b2b; padding: 5px 10%; color: white; }

 <header> <h4 class="logo">N</h4> <nav class='nav1'> <ul class='nav_links'> <a> <li href="#home">Home</li> </a> <a> <li href="#dresses">Dresses</li> </a> <a> <li href="#trends">Trends</li> </a> </ul> </nav> <a href="#"><button class="button">Contact</button></a> </header>

Answer 1

你可以給 ul display:flex 之間有空格

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

 * { margin: 0; padding: 0; box-sizing: border-box; color: #b7b7b7; } body { background-color: black; } header { display: flex; justify-content: space-between; align-items: center; padding: 10px 10%; background-color: #332323; }.logo { cursor: pointer; color: white; font-size: large; }.nav_links a { width: auto; cursor: pointer; border-left: 1px solid white; text-transform: uppercase; list-style-type: none; padding-left: 15px; padding-right: 15px; } ul { display: flex; justify-content: space-between; align-items: center; }.button { background-color: #302b2b; padding: 5px 10%; color: white; }

 <header> <h4 class="logo">N</h4> <nav class='nav1'> <ul class='nav_links'> <a> <li href="#home">Home</li> </a> <a> <li href="#dresses">Dresses</li> </a> <a> <li href="#trends">Trends</li> </a> </ul> </nav> <a href="#"><button class="button">Contact</button></a> </header>

Answer 2

您需要給 Nav 一些寬度，然后在 nav_links 上使用彈性框。 我刪除了你所有的填充錨寬度和邊距

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #b7b7b7;
  }
  
  body {
    background-color: black;
  }
  
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10%;
    background-color: #332323;
  }
  
  .logo {
    cursor: pointer;
    color: white;
    font-size: large;
  }
   /** Give the nav a width */
  .nav1{
      width:20%;
  }
  /** Set the flex properties */
  .nav_links{
    display: flex;
    justify-content: space-between;
  }
  .nav_links a {
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    list-style-type: none;
  }
  
  .button {
    background-color: #302b2b;
    padding: 5px 10%;
    color: white;
  }

Answer 3

您可以在導航上使用內部 flexbox。 此外，您在<li>元素上有 href，這不是必需的。 您可以將鏈接直接添加到<nav> ，它會根據需要對齊它們，因為它本身也在 flexbox 內，間隔均勻。

 * { margin: 0; padding: 0; box-sizing: border-box; color: #b7b7b7; } body { background-color: black; } header { display: flex; justify-content: space-between; align-items: center; padding: 10px 10%; background-color: #332323; }.logo { cursor: pointer; color: white; font-size: large; } nav { display: flex; flex-flow: row nowrap; justify-content: space-evenly; } nav a { text-align: center; cursor: pointer; border-left: 1px solid white; text-transform: uppercase; text-decoration: none; padding: 0.25rem 0.5rem; }.button { background-color: #302b2b; padding: 5px 10%; color: white; }

 <header> <h4 class="logo">N</h4> <nav class='nav1'> <a href="#home">Home</a> <a href="#dresses">Dresses</a> <a href="#trends">Trends</a> </nav> <a href="#"><button class="button">Contact</button></a> </header>