Flexbox Tailwind CSS 内联块不工作
Flexbox Tailwind CSS Inline Block Not Working
我正在使用 Tailwind CSS 并尝试创建一个导航栏,将我的社交页面 link 显示为所有设备尺寸的内联块,并在移动设备上围绕每个项目进行对齐设备,但它最终成为一个块项目。我将 flex 应用于 link 容器,添加了 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}}" alt="{{@site.title}}" 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>
为什么不保留它 .flex
并添加 .justify-between
.flex.w-full.justify-之间应该做的工作
<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}}" alt="{{@site.title}}" 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>
我正在使用 Tailwind CSS 并尝试创建一个导航栏,将我的社交页面 link 显示为所有设备尺寸的内联块,并在移动设备上围绕每个项目进行对齐设备,但它最终成为一个块项目。我将 flex 应用于 link 容器,添加了 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}}" alt="{{@site.title}}" 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>
为什么不保留它 .flex
并添加 .justify-between
.flex.w-full.justify-之间应该做的工作
<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}}" alt="{{@site.title}}" 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>