Flexbox Tailwind CSS 内联块不起作用

Posted 2023-03-06

【中文标题】Flexbox Tailwind CSS 内联块不起作用

【英文标题】：Flexbox Tailwind CSS Inline Block Not Working

【发布时间】：2020-04-17 14:10:56

【问题描述】：

我正在使用 Tailwind CSS 并尝试创建一个导航栏，将我的社交页面链接显示为所有设备尺寸的内联块，并在移动设备上对齐每个项目，但它最终成为一个块项目.我将 flex 应用于链接容器，添加了 justify-around 然后 inline-block 到 ul，但它没有识别 inline-block。这是因为我使用的 flex 对象的嵌套结构吗？

这是一个视觉示例：

需要内联块

在移动设备上的预期结果

这是我所指的代码：

!-- Container - Social Pages --
<div class="flex flex-row md:items-center justify-around border-solid border-4 border-purple-600">
    <ul class="inline-block border-solid border-4 border-teal-600">
        #if @site.facebook
        <li class="px-2"><a href="facebook_url @site.facebook" title="Facebook" target="_blank" rel="noopener">> icons/facebook</a></li>
        /if
        #if @site.twitter
        <li class="px-2"><a href="twitter_url @site.twitter" title="Twitter" target="_blank" rel="noopener">> icons/twitter</a></li>
        /if
        <li class="px-2"><a href="https://feedly.com/i/subscription/feed/@site.url/rss/" title="RSS" target="_blank" rel="noopener">> "icons/rss"</a></li>
    </ul>
</div>

这里是完整的代码：

!-- Navigation Container - Logo, Links, Mobile Menu --
<nav class="lg:flex lg:flex-wrap lg:items-center lg:justify-between border-solid border-4 border-blue-600">
    !-- Container - Logo and Mobile Menu --
    <div class="flex justify-between border-solid border-2 border-red-500">
        !-- Logo --
        <div class="border-solid border-4 border-gray-400">
            <a class="#" href="@site.url">
                #if @site.logo
                    <img src="@site.logo"  class="w-50 h-50" />
                else
                    @site.title
                /if
            </a>
        </div>
        !-- Mobile Menu Button --
        <div class="flex items-center border-solid border-4 border-green-600 lg:hidden">
            <button class="mobile-menu px-3 py-2 border rounded text-red-200 border-blue-400">
            <p>Menu</p>
            </button>
        </div>
    </div>
    !-- Container - Links and Social Pages --
    <div class="md:flex md:items-center nav-links border-solid border-4 border-black-400">
        !-- Container - Links --
        <div class="md:inline-block border-solid border-4 border-yellow-600">
            navigation
        </div>
        !-- Container - Social Pages --
        <div class="flex flex-row md:items-center justify-around border-solid border-4 border-purple-600">
            <ul class="inline-block border-solid border-4 border-teal-600">
                #if @site.facebook
                <li class="px-2"><a href="facebook_url @site.facebook" title="Facebook" target="_blank" rel="noopener">> icons/facebook</a></li>
                /if
                #if @site.twitter
                <li class="px-2"><a href="twitter_url @site.twitter" title="Twitter" target="_blank" rel="noopener">> icons/twitter</a></li>
                /if
                <li class="px-2"><a href="https://feedly.com/i/subscription/feed/@site.url/rss/" title="RSS" target="_blank" rel="noopener">> "icons/rss"</a></li>
            </ul>
        </div>
    </div>
</nav>

【参考方案1】：

为什么不保留.flex 并添加.justify-between

.flex.w-full.justify-between 应该可以完成这项工作

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

!-- Navigation Container - Logo, Links, Mobile Menu --
<nav class="lg:flex lg:flex-wrap lg:items-center lg:justify-between border-solid border-4 border-blue-600">
!-- Container - Logo and Mobile Menu --
<div class="flex justify-between border-solid border-2 border-red-500">
    !-- Logo --
    <div class="border-solid border-4 border-gray-400">
        <a class="#" href="@site.url">
            #if @site.logo
                <img src="@site.logo"  class="w-50 h-50" />
            else
                @site.title
            /if
        </a>
    </div>
    !-- Mobile Menu Button --
    <div class="flex items-center border-solid border-4 border-green-600 lg:hidden">
        <button class="mobile-menu px-3 py-2 border rounded text-red-200 border-blue-400">
        <p>Menu</p>
        </button>
    </div>
</div>
!-- Container - Links and Social Pages --
<div class="md:flex md:items-center nav-links border-solid border-4 border-black-400">
    !-- Container - Links --
    <div class="md:inline-block border-solid border-4 border-yellow-600">
        navigation
    </div>
    !-- Container - Social Pages --
    <div class="flex flex-row md:items-center justify-around border-solid border-4 border-purple-600">
        <ul class="flex w-full justify-between border-solid border-4 border-teal-600">
            #if @site.facebook
            <li class="px-2"><a href="facebook_url @site.facebook" title="Facebook" target="_blank" rel="noopener">> icons/facebook</a></li>
            /if
            #if @site.twitter
            <li class="px-2"><a href="twitter_url @site.twitter" title="Twitter" target="_blank" rel="noopener">> icons/twitter</a></li>
            /if
            <li class="px-2"><a href="https://feedly.com/i/subscription/feed/@site.url/rss/" title="RSS" target="_blank" rel="noopener">> "icons/rss"</a></li>
        </ul>
    </div>
</div>
</nav>

【讨论】：

就我而言，我所缺少的只是w-full。您的回答为我指明了正确的方向。谢谢