我有一个嵌套的flex box struct ,但是flex项目之间没有间隙.

      <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正文中,我try 使用justify-content属性,但它就是不起作用.

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

推荐答案

设置导航链接的宽度或使用列间距

        .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>

Css相关问答推荐

通过使溢出的子元素具有其宽度的100%来防止Flex元素溢出

如何仅以WooCommerce单一产品页面为目标?

如何使用遮罩创建手绘SVG动画

覆盖现有像素的混合

为什么align-content:start应用于单行项目?

Z Index 复杂性 - 如何将组件放置在 div 内部以相对于其级别外部的组件具有更高的 z-index 值?

Img 未拉伸以满足所需的纵横比

在具有特定类的 td 之后,如何编写适用于该行上所有 td 元素的表行的 CSS Select 器?

如何在启动时滚动 div 的底部?

Flex & space-around 与内容相交

如何在真实文本旁边制作文本阴影,使其看起来像 css 中的重复文本?

在移动设备上touch 屏幕边缘的元素(Material UI)

如何动态生成用逗号分隔的类列表?

如何使内容出现在固定的 DIV 元素下方?

调用转发到 JSP 的 Servlet 时,浏览器无法访问/查找相关资源,如 CSS、图像和链接

如何使用 JavaScript 获取元素的背景图片 URL?

如何根据容器大小设置字体大小?

行高百分比不起作用

CSS背景图像不透明度?

CSS中伪元素前的&是什么意思?