Html 另一个 flex 元素之间的 CSS 空间

发布于01月10日

我试图使简单的导航栏与标志，导航链接和按钮.将所有东西均匀地隔开

我对这3项进行了包装，然后应用了display:flex，然后在列表中再次应用了display:flex，但justify-content不影响列表项，它们被合并在一起.

.nav-wrapper{
    display: flex;
    justify-content: space-evenly;

    background: rgba(245, 253, 255, 0.8);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(14px);
}
.nav--list{
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
    
}

<div class="nav-wrapper">
    <img src="./images/logo.svg" alt="" class="logo">
    <nav class="nav">
        <ul class="nav--list">
            <li class="nav--list-item"><a href="#" class="nav-link boldy">Why Magic Massage</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">Features</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">Reviews</a></li>
            <li class="nav--list-item"><a href="#" class="nav-link">FAQ</a></li>
        </ul>
    </nav>
    <a href="#" class="order-now button">ORDER NOW</a>
</div>

.nav-wrapper{ display: flex; justify-content: space-evenly; background: rgba(245, 253, 255, 0.8); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06); backdrop-filter: blur(14px); } .nav--list{ display: flex; justify-content: space-between; gap: 20px; /* add gap */ margin: 0; padding: 0; list-style: none; }

<div class="nav-wrapper"> <img src="./images/logo.svg" alt="" class="logo"> <nav class="nav"> <ul class="nav--list"> <li class="nav--list-item"><a href="#" class="nav-link boldy">Why Magic Massage</a></li> <li class="nav--list-item"><a href="#" class="nav-link">Features</a></li> <li class="nav--list-item"><a href="#" class="nav-link">Reviews</a></li> <li class="nav--list-item"><a href="#" class="nav-link">FAQ</a></li> </ul> </nav> <a href="#" class="order-now button">ORDER NOW</a> </div>

Html 另一个 flex 元素之间的 CSS 空间

推荐答案

Html相关问答推荐

我的表的第一列似乎是推其他2列到右边，我不能改变它

放大缩小标题在外面的图像

Angular 15 p-对话框不使用组件 Select 器呈现HTML

如何收集<；p&>元素下的<；p>；子元素

嵌套表列高度不是100%高度的问题

我希望创建一个对角手风琴与不同的内容(文本和图像)在其正常状态和其他元素悬停

Chrome浏览器错误：上的主题验证判断https：//pagead2.googlesyndication.com/失败

配置了 HTML 视口的 Google Apps 脚本移动网络应用程序无法正确显示

当div位于flexbox中时，如何使div的宽度与高度相同

网页设计不适合移动设备

如何垂直平移一个元素，使其新位置位于另外两个元素之间？

重点/主动输入的概述问题

如何删除输入中输入类型数字中的箭头？

将背景图像裁剪成两半

是否可以使 huxtable 输出悬停？

当我将鼠标悬停在测试类上时，左侧类的 colored颜色没有改变

如何使我的下拉菜单响应？

如何在单击按钮时切换 Blazor 中的类？

使用 bootstrap-icons 的未排序图标堆栈

如何自定义具有白色透明背景的光标图像？