在嵌套的彈性框中創建彈性專案之間的空間-有解無憂

我有一個嵌套的彈性盒結構，但彈性專案之間沒有間隙。

      <div class = "navbar-container">
      <a href="index.html">
        <div class = "logo">
          <img src="./media/logo.svg" alt = " logo" height = "80px" width="80">
        </div>
      </a>
      <ul class = "nav-links">
        <li class = "nav-link">
          <a href="#">Install</a>
        </li>
        <li class = "nav-link">
          <a href="#">Learn</a>
        </li>
        <li class = "nav-link">
          <a href = "#">item</a>
        </li>
        <li class = "nav-link">
          <a href = "#">item</a>
        </li>

        <li class = "nav-link">
           <a href="#">item</a>
        </li>
        
      </ul>
  </div>

在我的 CSS 正文中，我嘗試使用justify-content屬性，但它不起作用。

.navbar-container{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
 }
 .nav-links{
   display: flex;
   justify-content:space-between;
  }

uj5u.com熱心網友回復：

設定導航鏈接的寬度或使用 column-gap

        .navbar-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .nav-links {
            width: 300px;
            // column-gap: 30px;
            display: flex;
            justify-content: space-between;
        }

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>

<body>

    <div class="navbar-container">
        <a href="index.html">
            <div class="logo">
                <img src="./media/logo.svg" alt=" logo" height="80px" width="80">
            </div>
        </a>
        <ul class="nav-links">
            <li class="nav-link">
                <a href="#">Install</a>
            </li>
            <li class="nav-link">
                <a href="#">Learn</a>
            </li>
            <li class="nav-link">
                <a href="#">item</a>
            </li>
            <li class="nav-link">
                <a href="#">item</a>
            </li>

            <li class="nav-link">
                <a href="#">item</a>
            </li>

        </ul>
    </div>
</body>

</html>

uj5u.com熱心網友回復：

你可以column-gap: 35px;在.nav-links課堂上使用。讀這個

或者

您可以添加padding-left:35px;.li.nav-link

.nav-links {
    display: flex;
    justify-content: space-between;
    column-gap: 35px;
}

uj5u.com熱心網友回復：

我最近不得不為客戶重構大部分代碼，因為我在網站上構建了許多帶有gapin結構的組件flex，而且他們使用的瀏覽器不支持它。

gap在所有現代瀏覽器中都支持flex，但由于某種原因沒有那么gap好grid。希望它很快就會得到全力支持。

flex-gap支持：https ://caniuse.com/?search=flex-gap

grid-gap支持：https ://caniuse.com/?search=grid-gap

僅出于這個原因，我還想提出一個與padding-right. 不過，您很可能會過得很好gap。下面的代碼將給出除最后一個之外的 padding所有 -元素。nav-link

.navbar-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.nav-links {
  display: flex;
  justify-content: space-between;
}

.nav-link:not(:last-child) {
  padding-right: 30px;
}

<div class="navbar-container">
  <a href="index.html">
    <div class="logo">
      <img src="./media/logo.svg" alt=" logo" height="80px" width="80">
    </div>
  </a>
  <ul class="nav-links">
    <li class="nav-link">
      <a href="#">Install</a>
    </li>
    <li class="nav-link">
      <a href="#">Learn</a>
    </li>
    <li class="nav-link">
      <a href="#">item</a>
    </li>
    <li class="nav-link">
      <a href="#">item</a>
    </li>

    <li class="nav-link">
      <a href="#">item</a>
    </li>

  </ul>
</div>

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

標籤：css 弹性盒

上一篇：您可以更改特定頁面的css屬性嗎？

下一篇：SVG改變動態顏色