英文:
Navbar layout shifting in flexbox using tailwind css
问题
在鼠标悬停时加粗，文本会导致布局变化。我正在使用Tailwind CSS。这是我的代码：
<div class="mx-12 flex items-center justify-around">
<nav>
<ul class="flex gap-8">
<li>
<a href="/" class="text-2xl font-normal hover:font-bold"> Shop </a>
</li>
<li>
<a href="/About" class="text-2xl font-normal hover:font-bold"> About us </a>
</li>
<li>
<a href="/Contact" class="text-2xl font-normal hover:font-bold"> Contact us </a>
</li>
</ul>
</nav>
</div>
我不想使用绝对定位或任何会干扰响应性的东西。
英文:
on hover bold, text is shifting layout. I am using tailwind css. this is my code
https://play.tailwindcss.com/fAUieA44OB
I don't want to use position absolute or anything which disturbs responsiveness.
<div class="mx-12 flex items-center justify-around">
<nav>
<ul class="flex gap-8">
<li>
<a href="/" class="text-2xl font-normal hover:font-bold"> Shop </a>
</li>
<li>
<a href="/About" class="text-2xl font-normal hover:font-bold"> About us </a>
</li>
<li>
<a href="/Contact" class="text-2xl font-normal hover:font-bold"> Contact us </a>
</li>
</ul>
</nav>
</div>
答案1
得分: 1
以下代码在大屏幕上运行正常，但在小屏幕上不运行。 顺便说一下，在小屏幕上，我们不使用悬停效果。
<div class="mx-12 flex items-center justify-around">
<nav style="width:100%;"> <!-- Changed this -->
<ul class="flex text-center justify-center"> <!-- Changed this -->
<li style="width:33%;"> <!-- Changed this -->
<a href="/" class="text-2xl font-normal hover:font-bold"> Shop </a>
</li>
<li style="width:33%;"> <!-- Changed this -->
<a href="/About" class="text-2xl font-normal hover:font-bold"> About us </a>
</li>
<li style="width:33%;"> <!-- Changed this -->
<a href="/Contact" class="text-2xl font-normal hover:font-bold"> Contact us </a>
</li>
</ul>
</nav>
</div>
这个想法是使容器的宽度（这里是 <li>）与内容（这里是 <a>）独立。如果容器的宽度取决于内容的宽度，那么如果内容变粗（从而增加其大小），容器的宽度也会增加。容器（<li>）会影响其父级 <ul>（flex）中其他容器（<li>）的位置。因此会出现布局移位。
如果容器的宽度（<li>）与内容无关，那么就不会出现布局移位。
除了style="width:33%"，另一种方法是在所有 <li> 上使用```style="flex:1 1 33%"``。
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
谢谢
英文:
Below code works on large screen and not small screen.
BTW on small screen we don't use hover effect.
<div class="mx-12 flex items-center justify-around">
<nav style="width:100%"> <!-- Changed this -->
<ul class="flex text-center justify-center"> <!-- Changed this -->
<li style="width:33%"> <!-- Changed this -->
<a href="/" class="text-2xl font-normal hover:font-bold"> Shop </a>
</li>
<li style="width:33%"> <!-- Changed this -->
<a href="/About" class="text-2xl font-normal hover:font-bold"> About us </a>
</li>
<li style="width:33%"> <!-- Changed this -->
<a href="/Contact" class="text-2xl font-normal hover:font-bold"> Contact us </a>
</li>
</ul>
</nav>
</div>
The idea is to make the width of containers (here, <li>) independent of the content (here, <a>).
If the width of containers depends on the width of content, then if the content becomes bold (thereby increasing its size), the width of container also increases. The container (<li>) affects the position of other containers (<li>) within their parent <ul> (flex). So there is layout shift.
If the width of containers (<li>) is independent of the content, then there is no layout shift.
Instead of style="width:33%", another way could be to use style="flex:1 1 33%" on all <li>s.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Thanks
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论