另一个flex元素内部的CSS空格[重复]

wljmcqd8 于 2023-01-14 发布在其他

关注(0)|答案(2)|浏览(133)

- 此问题在此处已有答案**：

Better way to set distance between flexbox items（40个答案）
4天前关闭。
我试图使简单的导航栏与标志，导航链接和按钮。和空间一切均匀
我用 Package 器来 Package 这3个项，然后应用display:flex，然后在list中再次应用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>

css

来源：https://stackoverflow.com/questions/75068387/css-space-between-inside-another-flex-element

2条答案

按热度按时间

b4qexyjb1#

您可以使用gap. https://developer.mozilla.org/en-US/docs/Web/CSS/gap

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

赞(0）回复(0）举报 2023-01-14

c3frrgcw2#

在nav--list类中使用css gap或column-gap属性：

.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;
    column-gap: 1.5em;
}

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

赞(0）回复(0）举报 2023-01-14

我来回答

另一个flex元素内部的CSS空格[重复]

2条答案

相关问题

热门标签

最新问答