2023年6月30日 01:59:45go评论73阅读模式

英文:

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

问题

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

预期结果

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

我得到的结果

&lt;div class=&quot;flex&quot;&gt;
          &lt;img
            src=&quot;.//img/indianFlag.png&quot;
            alt=&quot;IndianFlag&quot;
            width=&quot;30px&quot;
            height=&quot;20px&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;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;./img/razorpayLogo.png&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;.//img/indianFlag.png&quot;
            alt=&quot;IndianFlag&quot;
            width=&quot;30px&quot;
            height=&quot;20px&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;

英文:

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

Expected Result

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

Result i am getting

&lt;div class=&quot;flex&quot;&gt;
          &lt;img
            src=&quot;.//img/indianFlag.png&quot;
            alt=&quot;IndianFlag&quot;
            width=&quot;30px&quot;
            height=&quot;20px&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;

This is the complete code

&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;./img/razorpayLogo.png&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;.//img/indianFlag.png&quot;
            alt=&quot;IndianFlag&quot;
            width=&quot;30px&quot;
            height=&quot;20px&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;```


</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 <img> so the <img> 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:

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

&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;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

如何使用CSS创建类似设计的布局？

Angular 14 – 如何在向列表添加新项时动态渲染HTML/DOM

无法在HTML表单和Javascript中显示结果。

Prettier 在 HTML 中强制在每个标记前后添加空格。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论