代码之家 › 专栏 › 技术社区 › Thirumal isireddy

在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

navbar tailwind-css flexbox image html

Thirumal isireddy · 技术社区 · 1 年前

我想创建标志登录按钮和注册按钮
我用过 class="flex" 里面是img
但我一添加按钮图像就失真了。如何避免这种情况

我想创建标志、登录按钮和注册按钮
我用过 class=“弹性” 里面是img
但我一添加按钮图像就失真了。如何避免这种情况

<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 回复 | 直到 1 年前

Wongjn 1 年前

柔性布局子项具有 align-self: stretch 默认情况下,这会使所有子元素拉伸到最高的元素。按钮比 <img> 所以 <img> 在高度上拉伸到与按钮相同的高度,从而产生扭曲。考虑覆盖默认值 自对齐:拉伸 通过应用不同的 align-self 例如 align-self: center 通过 self-center 类别:

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

<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>
      <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="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>