Navbar链接边距类在Tailwind CSS中似乎是重复的，有更好的方法吗？

在一个不是动态生成的菜单上，必须向每个LI添加边距类似乎是非常重复的。这感觉像使用style=”“属性一样脏

肯定有更好的办法吗

对于一个小菜单来说，这不是一个大问题，但是最终的菜单将有很多级别的子菜单

我想知道我是否应该在样式表中写一条规则，在菜单项上添加边距

我不熟悉

tailwind css

，但您可以使用

：last child

和

：first child

选择器

nav ul li{
左边距：10px；
右边距：10px；
}
李海军：第一个孩子{
左边距：0px；
}
李海军：最后一个孩子{
右边距：0px；
}

我不熟悉

tailwind css

，但您可以使用

：last child

和

：first child

选择器

nav ul li{
左边距：10px；
右边距：10px；
}
李海军：第一个孩子{
左边距：0px；
}
李海军：最后一个孩子{
右边距：0px；
}

我将把上面的答案标记为正确，因为我没有提供关于这是一个Laravel项目的上下文。我决定为我的导航创建一个分部，然后向它传递一个标签和URL数组

// snippet of layouts/app.blade.php
@include('layouts._nav', ['links' => [
    [ 'label' => 'Main feed', 'url' => '/posts' ],
    [ 'label' => 'Announcements', 'url' => '/announcements' ],
    [ 'label' => 'Who to follow', 'url' => '/who-to-follow' ],
    [ 'label' => 'Profile', 'url' => '/profiles' ]
]])

//layouts/_nav.blade.php

@foreach（$links作为$link）
@php
如果（$loop->迭代===1）
$class='mr-1'；
elseif（$loop->iteration===$loop->count）
$class='ml-1'；
其他的
$class='ml-1 mr-1'；
@endphp


@endforeach

输出HTML:

<nav>
    <ul class="flex flex-row">
        <li class="mr-1">
            <a href="/posts">Main feed</a>
        </li>
        <li class="ml-1 mr-1">
            <a href="/announcements">Announcements</a>
        </li>
        <li class="ml-1 mr-1">
            <a href="/who-to-follow">Who to follow</a>
        </li>
        <li class="ml-1">
            <a href="/profiles">Profile</a>
        </li>
    </ul>
</nav>

我将把上面的答案标记为正确，因为我没有提供关于这是一个Laravel项目的上下文。我决定为我的导航创建一个分部，然后向它传递一个标签和URL数组

// snippet of layouts/app.blade.php
@include('layouts._nav', ['links' => [
    [ 'label' => 'Main feed', 'url' => '/posts' ],
    [ 'label' => 'Announcements', 'url' => '/announcements' ],
    [ 'label' => 'Who to follow', 'url' => '/who-to-follow' ],
    [ 'label' => 'Profile', 'url' => '/profiles' ]
]])

//layouts/_nav.blade.php

@foreach（$links作为$link）
@php
如果（$loop->迭代===1）
$class='mr-1'；
elseif（$loop->iteration===$loop->count）
$class='ml-1'；
其他的
$class='ml-1 mr-1'；
@endphp


@endforeach

输出HTML:

<nav>
    <ul class="flex flex-row">
        <li class="mr-1">
            <a href="/posts">Main feed</a>
        </li>
        <li class="ml-1 mr-1">
            <a href="/announcements">Announcements</a>
        </li>
        <li class="ml-1 mr-1">
            <a href="/who-to-follow">Who to follow</a>
        </li>
        <li class="ml-1">
            <a href="/profiles">Profile</a>
        </li>
    </ul>
</nav>

我认为在这种情况下，您必须编写自己的规则来匹配无序列表中的所有

元素，然后将特定样式设置为第一个和最后一个孩子，就像下面的答案中用户9408899所说的那样。我想在这种情况下，您必须编写自己的规则来匹配无序列表中的所有

元素，然后将specifics styles设置为first和last Child，就像user9408899在下面的回答中所说的那样我是tailwind新手，但它的好处之一应该是防止html和css文件之间的上下文切换。在我决定这件事之前，我会看看是否有人有更多的TW经验。谢谢在《顺风号》中重做我的界面后，我不得不说，我并没有那么印象深刻。我经常问自己，为什么我不直接用它来代替呢？对于小组件来说，部分似乎真的太多了，在样式表中使用@apply似乎真的违反直觉。现在，我将坚持使用SASS和Bootstrap（至少在Bulma添加开箱即用的实用程序类之前），我是tailwind的新手，但它的好处之一应该是防止html和css文件之间的上下文切换。在我决定这件事之前，我会看看是否有人有更多的TW经验。谢谢在《顺风号》中重做我的界面后，我不得不说，我并没有那么印象深刻。我经常问自己，为什么我不直接用它来代替呢？对于小组件来说，部分似乎真的太多了，在样式表中使用@apply似乎真的违反直觉。现在，我将坚持使用SASS和引导（至少在Bulma添加现成的实用程序类之前）