在Tailwind CSS的导航栏中，图像被扭曲而不是将元素推到旁边。

huangapple
go评论102阅读模式
英文:

In navbar tailwind css, img is getting distorted rather than pushing elements beside

问题

  1. 我想创建旗帜、登录按钮和注册按钮。
  2. 我使用了 class="flex"，在其中放了一个图像。
  3. 但是一旦我添加按钮，图像就会变形。如何避免这种情况？

预期结果

  1. 我想创建旗帜、登录按钮和注册按钮。
  2. 我使用了 class="flex"，在其中放了一个图像。
  3. 但是一旦我添加按钮，图像就会变形。如何避免这种情况？

我得到的结果

  1. <div class="flex">
  2.           <img
  3.             src=".//img/indianFlag.png"
  4.             alt="IndianFlag"
  5.             width="30px"
  6.             height="20px"/>
  7.           <button
  8.             class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md">
  9.             Log in
  10.           </button>
  11.         </div>

这是完整的代码

  1. <nav class="bg-deepBlue">
  2.       <div
  3.         class="relative w-[1080px] mx-auto flex items-center justify-between"
  4.       >
  5.         <!-- logo -->
  6.         <a href="#" class="cursor-pointer py-7 pr-7">
  7.           <img
  8.             src="./img/razorpayLogo.png"
  9.             alt="RazorpayLogo"
  10.             width="125px"
  11.             height="30px"
  12.           />
  13.         </a>
  14.         <ul class="flex gap-x-6">
  15.           <li
  16.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  17.           >
  18.             <a href="#">Payments</a>
  19.             <div
  20.               class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
  21.             ></div>
  22.           </li>
  23.           <li
  24.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  25.           >
  26.             <a href="#">Banking</a>
  27.             <div
  28.               class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
  29.             ></div>
  30.           </li>
  31.           <li
  32.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  33.           >
  34.             <a href="#">Line of Credit</a>
  35.           </li>
  36.           <li
  37.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  38.           >
  39.             <a href="#">Payroll</a>
  40.           </li>
  41.           <li
  42.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  43.           >
  44.             <a href="#">Resources</a>
  45.             <div
  46.               class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
  47.             ></div>
  48.           </li>
  49.           <li
  50.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  51.           >
  52.             <a href="#">Support</a>
  53.             <div
  54.               class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
  55.             ></div>
  56.           </li>
  57.           <li
  58.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  59.           >
  60.             <a href="#">Pricing</a>
  61.           </li>
  62.         </ul>
  63.         <div class="flex">
  64.           <img
  65.             src=".//img/indianFlag.png"
  66.             alt="IndianFlag"
  67.             width="30px"
  68.             height="20px"
  69.           />
  70.           <button
  71.             class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md"
  72.           >
  73.             Log in
  74.           </button>
  75.         </div>
  76.       </div>
  77.     </nav>
英文:
  1. I want to create the flag login button and sign up button
  2. i used class="flex" and inside that an img
  3. but as soon as i add the button image is getting distorted. how to avoid this

Expected Result

  1. I want to create the flag, login button and sign up button
  2. i used class="flex" and inside that an img
  3. but as soon as i add the button image is getting distorted. how to avoid this

Result i am getting

  1. <div class="flex">
  2.           <img
  3.             src=".//img/indianFlag.png"
  4.             alt="IndianFlag"
  5.             width="30px"
  6.             height="20px"/>
  7.           <button
  8.             class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md">
  9.             Log in
  10.           </button>
  11.         </div>

This is the complete code

  1. <nav class="bg-deepBlue">
  2.       <div
  3.         class="relative w-[1080px] mx-auto flex items-center justify-between"
  4.       >
  5.         <!-- logo -->
  6.         <a href="#" class="cursor-pointer py-7 pr-7">
  7.           <img
  8.             src="./img/razorpayLogo.png"
  9.             alt="RazorpayLogo"
  10.             width="125px"
  11.             height="30px"
  12.           />
  13.         </a>
  14.         <ul class="flex gap-x-6">
  15.           <li
  16.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  17.           >
  18.             <a href="#">Payments</a>
  19.             <div
  20.               class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
  21.             ></div>
  22.           </li>
  23.           <li
  24.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  25.           >
  26.             <a href="#">Banking</a>
  27.             <div
  28.               class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
  29.             ></div>
  30.           </li>
  31.           <li
  32.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  33.           >
  34.             <a href="#">Line of Credit</a>
  35.           </li>
  36.           <li
  37.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  38.           >
  39.             <a href="#">Payroll</a>
  40.           </li>
  41.           <li
  42.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  43.           >
  44.             <a href="#">Resources</a>
  45.             <div
  46.               class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
  47.             ></div>
  48.           </li>
  49.           <li
  50.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  51.           >
  52.             <a href="#">Support</a>
  53.             <div
  54.               class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
  55.             ></div>
  56.           </li>
  57.           <li
  58.             class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
  59.           >
  60.             <a href="#">Pricing</a>
  61.           </li>
  62.         </ul>
  63.         <div class="flex">
  64.           <img
  65.             src=".//img/indianFlag.png"
  66.             alt="IndianFlag"
  67.             width="30px"
  68.             height="20px"
  69.           />
  70.           <button
  71.             class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md"
  72.           >
  73.             Log in
  74.           </button>
  75.         </div>
  76.       </div>
  77.     </nav>```
  80. </details>
  83. # 答案1
  84. **得分**: 0
  86. Flex布局的子元素默认具有`align-self: stretch`，这使得所有元素子元素都拉伸到最高的元素的高度。按钮比`<img>`更高，所以`<img>`的高度会被拉伸到与按钮相同的高度，因此出现了扭曲。考虑通过应用不同的`align-self`来覆盖默认的`align-self: stretch`，例如通过`self-center`类应用`align-self: center`：
  88. ```html
  89. <!-- begin snippet: js hide: false console: false babel: false -->
  91. <!-- language: lang-js -->
  92. tailwind.config = {
  93.   theme: {
  94.     extend: {
  95.       colors: {
  96.         deepBlue: 'darkblue',
  97.         lightBlue: 'lightblue',
  98.       },
  99.     },
  100.   },
  101. };
  103. <!-- language: lang-html -->
  104. <script src="https://cdn.tailwindcss.com/3.3.2"></script>
  106. <nav class="bg-deepBlue">
  107.   <div class="relative w-[1080px] mx-auto flex items-center justify-between">
  108.     <!-- logo -->
  109.     <a href="#" class="cursor-pointer py-7 pr-7">
  110.       <img src="https://picsum.photos/125/30" alt="RazorpayLogo" width="125px" height="30px" />
  111.     </a>
  112.     <ul class="flex gap-x-6">
  113.       <li class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group">
  114.         <a href="#">Payments</a>
  115.         <div class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"></div>
  116.       </li>
  117.       <!-- ... 这里省略了其他菜单项 ... -->
  118.     </ul>
  119.     <div class="flex">
  120.       <img src="https://picsum.photos/30/20" alt="IndianFlag" width="30px" height="20px" class="self-center" />
  121.       <button class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md">
  122.         Log in
  123.       </button>
  124.     </div>
  125.   </div>
  126. </nav>
  128. <!-- end snippet -->

请注意，上述代码示例包含了Tailwind CSS样式类，这些类用于样式化HTML元素。

英文:

Flex layout children have align-self: stretch by default, which makes all the element children stretch to the tallest element. The button is taller than the &lt;img&gt; so the &lt;img&gt; stretches in height to be the same height as the button, hence the distortion. Consider overriding the default align-self: stretch by applying a different align-self, for example, align-self: center via the self-center class:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

  1. tailwind.config = {
  2.   theme: {
  3.     extend: {
  4.       colors: {
  5.         deepBlue: &#39;darkblue&#39;,
  6.         lightBlue: &#39;lightblue&#39;,
  7.       },
  8.     },
  9.   },
  10. };

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdn.tailwindcss.com/3.3.2&quot;&gt;&lt;/script&gt;
  3. &lt;nav class=&quot;bg-deepBlue&quot;&gt;
  4.   &lt;div class=&quot;relative w-[1080px] mx-auto flex items-center justify-between&quot;&gt;
  5.     &lt;!-- logo --&gt;
  6.     &lt;a href=&quot;#&quot; class=&quot;cursor-pointer py-7 pr-7&quot;&gt;
  7.       &lt;img src=&quot;https://picsum.photos/125/30&quot; alt=&quot;RazorpayLogo&quot; width=&quot;125px&quot; height=&quot;30px&quot; /&gt;
  8.     &lt;/a&gt;
  9.     &lt;ul class=&quot;flex gap-x-6&quot;&gt;
  10.       &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
  11.         &lt;a href=&quot;#&quot;&gt;Payments&lt;/a&gt;
  12.         &lt;div class=&quot;absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200&quot;&gt;&lt;/div&gt;
  13.       &lt;/li&gt;
  14.       &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
  15.         &lt;a href=&quot;#&quot;&gt;Banking&lt;/a&gt;
  16.         &lt;div class=&quot;absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200&quot;&gt;&lt;/div&gt;
  17.       &lt;/li&gt;
  18.       &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
  19.         &lt;a href=&quot;#&quot;&gt;Line of Credit&lt;/a&gt;
  20.       &lt;/li&gt;
  21.       &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
  22.         &lt;a href=&quot;#&quot;&gt;Payroll&lt;/a&gt;
  23.       &lt;/li&gt;
  24.       &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
  25.         &lt;a href=&quot;#&quot;&gt;Resources&lt;/a&gt;
  26.         &lt;div class=&quot;absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200&quot;&gt;&lt;/div&gt;
  27.       &lt;/li&gt;
  28.       &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
  29.         &lt;a href=&quot;#&quot;&gt;Support&lt;/a&gt;
  30.         &lt;div class=&quot;absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200&quot;&gt;&lt;/div&gt;
  31.       &lt;/li&gt;
  32.       &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
  33.         &lt;a href=&quot;#&quot;&gt;Pricing&lt;/a&gt;
  34.       &lt;/li&gt;
  35.     &lt;/ul&gt;
  36.     &lt;div class=&quot;flex&quot;&gt;
  37.       &lt;img src=&quot;https://picsum.photos/30/20&quot; alt=&quot;IndianFlag&quot; width=&quot;30px&quot; height=&quot;20px&quot; class=&quot;self-center&quot; /&gt;
  38.       &lt;button class=&quot;py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md&quot;&gt;
  39.             Log in
  40.           &lt;/button&gt;
  41.     &lt;/div&gt;
  42.   &lt;/div&gt;
  43. &lt;/nav&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月30日 01:59:45
  • 转载请务必保留本文链接：https://go.coder-hub.com/76583547.html
  • flexbox
  • html
  • image
  • navbar
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定