英文:
In navbar tailwind css, img is getting distorted rather than pushing elements beside
问题
- 我想创建旗帜、登录按钮和注册按钮。
- 我使用了
class="flex"
,在其中放了一个图像。 - 但是一旦我添加按钮,图像就会变形。如何避免这种情况?
- 我想创建旗帜、登录按钮和注册按钮。
- 我使用了
class="flex"
,在其中放了一个图像。 - 但是一旦我添加按钮,图像就会变形。如何避免这种情况?
<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>
英文:
- 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
- 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
<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 <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:
<!-- 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>
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论