Question

我仍在学习TailwindCSS和flexbox，但是尽管按照有关构建导航栏的说明进行操作，但仍未获得理想的结果。它们不是垂直显示我的链接，而是显示为内联块。我要显示为嵌入式块的链接的类代码中是否缺少某些内容？还是与我提供的父div的flexbox属性继承的类相关？

这是结果：

<header class="container">
    <nav class="flex flex-wrap items-center justify-between px-6 lg:px-16 bg-indigo-100">
        <div class="flex flex-shrink-0 text-white">
            <a class="#" href="{{@site.url}}">
                {{#if @site.logo}}
                    <img src="{{@site.logo}}" alt="{{@site.title}}" class="w-50 h-50" />
                {{else}}
                    {{@site.title}}
                {{/if}}
            </a>
        </div>
        <!-- Menu Button (Mobile) -->
        <div class="block lg:hidden">
            <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
            <p>Menu</p>
            </button>
        </div>
        <div class="inline-block">
            {{navigation}}
        </div>
        <div class="inline-block">
            {{#if @site.facebook}}
            <a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
            {{/if}}
            {{#if @site.twitter}}
            <a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
            {{/if}}
            <a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
        </div>
    </nav>
</header>

这是{{navigation}}部分：

<ul class="nav">
    <li class="nav-home nav-current"><a href="/">Home</a></li>
    <li class="nav-about"><a href="/about">About</a></li>
</ul>

Answer 1

TailWindCSS是实用程序优先的CSS框架。检查下面的HTML。

<header class="container">
    <nav class="flex flex-wrap items-center justify-between px-6 lg:px-16 bg-indigo-100">
        <div class="flex flex-shrink-0 text-white">
            <a class="#" href="{{@site.url}}">
                {{#if @site.logo}}
                    <img src="{{@site.logo}}" alt="{{@site.title}}" class="w-50 h-50" />
                {{else}}
                    {{@site.title}}
                {{/if}}
            </a>
        </div>
        <!-- Menu Button (Mobile) -->
        <div class="block lg:hidden">
            <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
            <p>Menu</p>
            </button>
        </div>
        <div class="inline-block">
            <ul class="nav flex flex-row">
    <li class="nav-home nav-current"><a href="/">Home</a></li>
    <li class="nav-about"><a href="/about">About</a></li>
</ul>
        </div>
        <div class="flex flex-row">
            {{#if @site.facebook}}
            <a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
            {{/if}}
            {{#if @site.twitter}}
            <a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
            {{/if}}
            <a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
        </div>
    </nav>
</header>

Flexbox Complete Guide。这是使用TailwindCSS的导航栏demo。

TailwindCSS Flexbox导航栏链接未内联显示

1 个答案: