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

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

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

问题

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

预期结果

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

我得到的结果

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

这是完整的代码

<nav class="bg-deepBlue">
      <div
        class="relative w-[1080px] mx-auto flex items-center justify-between"
      >
        <!-- logo -->
        <a href="#" class="cursor-pointer py-7 pr-7">
          <img
            src="./img/razorpayLogo.png"
            alt="RazorpayLogo"
            width="125px"
            height="30px"
          />
        </a>
        <ul class="flex gap-x-6">
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Payments</a>
            <div
              class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
            ></div>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Banking</a>
            <div
              class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
            ></div>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Line of Credit</a>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Payroll</a>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Resources</a>
            <div
              class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
            ></div>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Support</a>
            <div
              class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
            ></div>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Pricing</a>
          </li>
        </ul>
        <div class="flex">
          <img
            src=".//img/indianFlag.png"
            alt="IndianFlag"
            width="30px"
            height="20px"
          />
          <button
            class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md"
          >
            Log in
          </button>
        </div>
      </div>
    </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

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

This is the complete code

<nav class="bg-deepBlue">
      <div
        class="relative w-[1080px] mx-auto flex items-center justify-between"
      >
        <!-- logo -->
        <a href="#" class="cursor-pointer py-7 pr-7">
          <img
            src="./img/razorpayLogo.png"
            alt="RazorpayLogo"
            width="125px"
            height="30px"
          />
        </a>
        <ul class="flex gap-x-6">
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Payments</a>
            <div
              class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
            ></div>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Banking</a>
            <div
              class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
            ></div>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Line of Credit</a>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Payroll</a>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Resources</a>
            <div
              class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
            ></div>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Support</a>
            <div
              class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
            ></div>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Pricing</a>
          </li>
        </ul>
        <div class="flex">
          <img
            src=".//img/indianFlag.png"
            alt="IndianFlag"
            width="30px"
            height="20px"
          />
          <button
            class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md"
          >
            Log in
          </button>
        </div>
      </div>
    </nav>```


</details>


# 答案1
**得分**: 0

Flex布局的子元素默认具有`align-self: stretch`,这使得所有元素子元素都拉伸到最高的元素的高度。按钮比`<img>`更高,所以`<img>`的高度会被拉伸到与按钮相同的高度,因此出现了扭曲。考虑通过应用不同的`align-self`来覆盖默认的`align-self: stretch`,例如通过`self-center`类应用`align-self: center`:

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

<!-- language: lang-js -->
tailwind.config = {
  theme: {
    extend: {
      colors: {
        deepBlue: 'darkblue',
        lightBlue: 'lightblue',
      },
    },
  },
};

<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<nav class="bg-deepBlue">
  <div class="relative w-[1080px] mx-auto flex items-center justify-between">
    <!-- logo -->
    <a href="#" class="cursor-pointer py-7 pr-7">
      <img src="https://picsum.photos/125/30" alt="RazorpayLogo" width="125px" height="30px" />
    </a>
    <ul class="flex gap-x-6">
      <li class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group">
        <a href="#">Payments</a>
        <div class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"></div>
      </li>
      <!-- ... 这里省略了其他菜单项 ... -->
    </ul>
    <div class="flex">
      <img src="https://picsum.photos/30/20" alt="IndianFlag" width="30px" height="20px" class="self-center" />
      <button class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md">
        Log in
      </button>
    </div>
  </div>
</nav>

<!-- 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 -->

tailwind.config = {
  theme: {
    extend: {
      colors: {
        deepBlue: &#39;darkblue&#39;,
        lightBlue: &#39;lightblue&#39;,
      },
    },
  },
};

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

&lt;script src=&quot;https://cdn.tailwindcss.com/3.3.2&quot;&gt;&lt;/script&gt;

&lt;nav class=&quot;bg-deepBlue&quot;&gt;
  &lt;div class=&quot;relative w-[1080px] mx-auto flex items-center justify-between&quot;&gt;
    &lt;!-- logo --&gt;
    &lt;a href=&quot;#&quot; class=&quot;cursor-pointer py-7 pr-7&quot;&gt;
      &lt;img src=&quot;https://picsum.photos/125/30&quot; alt=&quot;RazorpayLogo&quot; width=&quot;125px&quot; height=&quot;30px&quot; /&gt;
    &lt;/a&gt;
    &lt;ul class=&quot;flex gap-x-6&quot;&gt;
      &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;Payments&lt;/a&gt;
        &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;
      &lt;/li&gt;
      &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;Banking&lt;/a&gt;
        &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;
      &lt;/li&gt;
      &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;Line of Credit&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;Payroll&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;Resources&lt;/a&gt;
        &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;
      &lt;/li&gt;
      &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;Support&lt;/a&gt;
        &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;
      &lt;/li&gt;
      &lt;li class=&quot;text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;Pricing&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class=&quot;flex&quot;&gt;
      &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;
      &lt;button class=&quot;py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md&quot;&gt;
            Log in
          &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;

<!-- end snippet -->

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

发表评论

匿名网友

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

确定