当我的按钮包含徽标图像时，为什么我的按钮会垂直拉伸？

发布于 2025-02-07 16:24:42 字数 1296 浏览 1 评论 0原文

我正在使用parwindcss。我里面有一个flexbox容器和一个登录按钮。按钮看起来好像正在伸展。

<nav font-am class="m-6 text-xl">
      <div class="flex flex-row justify-between container">

        <div>
          <img src="./img/Logo.png">
        </div>

        <div class="flex flex-row">
          <a href="#"><img src="./img/AccountLog.png"></a>
          <p class="hidden md:flex">My Account</p>
        </div>

        <div class="flex flex-row">
          <a href="#"><img src="./img/love_symbol.png"></a>
          <p class="hidden md:flex">My List</p>
        </div>

        <div class="flex box-border flex-row">
          <a href="#"><img src="./img/LockLogo.png"></a>
          <button class="bg-darkPink hover:underline text-white font-bold py-2 px-4 rounded-full" role="button">Sign In</button>
        </div>

      </div>
    </nav>

这是徽标的外观：

，当我删除徽标时，按钮将正常显示：

“没有徽标”

当徽标打开时，我该怎么办才能保持按钮看起来正常。徽标是否占用太多空间？

原文

I'm using tailwindcss. I have a flexbox container and a login button inside it.
The button looks like it's being stretched.

<nav font-am class="m-6 text-xl">
      <div class="flex flex-row justify-between container">

        <div>
          <img src="./img/Logo.png">
        </div>

        <div class="flex flex-row">
          <a href="#"><img src="./img/AccountLog.png"></a>
          <p class="hidden md:flex">My Account</p>
        </div>

        <div class="flex flex-row">
          <a href="#"><img src="./img/love_symbol.png"></a>
          <p class="hidden md:flex">My List</p>
        </div>

        <div class="flex box-border flex-row">
          <a href="#"><img src="./img/LockLogo.png"></a>
          <button class="bg-darkPink hover:underline text-white font-bold py-2 px-4 rounded-full" role="button">Sign In</button>
        </div>

      </div>
    </nav>

Here is how it looks with the logo:

with logo

And the button is displayed normally when I delete the logo:

Without logo

What should I do to keep the button looks normal when the logo is on. Is the logo taking up too much space or something?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

罗罗贝儿 2025-02-14 16:24:42

您将按钮设置为弹性行中的拉伸弹性元件。您可以做几件事之一来解决它：

将行元素对齐以将其居中而不是拉伸。在这里，'。自我中心似乎效果很好，尽管您也可以在行级别上进行。
将按钮包裹在Div中。这将使Div伸展元素，您需要将按钮垂直以其他样式为中心。

这两个解决方案均显示在此处。

.bg-darkPink {
  background: pink;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<nav font-am class="m-6 text-xl">
  <div class="flex flex-row justify-between container">
    <div class="flex box-border flex-row">
      <a href="#"><img src="https://via.placeholder.com/80"></a>

      <button class="bg-darkPink hover:underline text-white_disabled font-bold 
                     py-2 px-4 rounded-full self-center">Flex class</button>
    </div>

    <div class="flex box-border flex-row">
      <a href="#"><img src="https://via.placeholder.com/80"></a>

      <div class="flex flex-column items-center">
        <button class="bg-darkPink hover:underline text-white_disabled font-bold 
                       py-2 px-4 rounded-full">Flex div</button>
      </div>
    </div>
  </div>
</nav>

You've set your button as a stretched flex element in a flex row. You can do one of several things to fix it:

Align the row elements to center rather than stretching them. Here, '.self-center` seems to work nicely, though you could do it at the row level also.
Wrap the button in a div. This will make the div the stretched element, and you'll need to center the button vertically with other styles.

Both solutions are shown here.

.bg-darkPink {
  background: pink;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<nav font-am class="m-6 text-xl">
  <div class="flex flex-row justify-between container">
    <div class="flex box-border flex-row">
      <a href="#"><img src="https://via.placeholder.com/80"></a>

      <button class="bg-darkPink hover:underline text-white_disabled font-bold 
                     py-2 px-4 rounded-full self-center">Flex class</button>
    </div>

    <div class="flex box-border flex-row">
      <a href="#"><img src="https://via.placeholder.com/80"></a>

      <div class="flex flex-column items-center">
        <button class="bg-darkPink hover:underline text-white_disabled font-bold 
                       py-2 px-4 rounded-full">Flex div</button>
      </div>
    </div>
  </div>
</nav>

回复收藏 0 原文