为什么导航栏中的所有内容都显示在列中?就连img元素也占据了一条空穴线。
为什么导航栏中的所有内容都显示在列中?就连img元素也占据了一条空穴线。
提问于 2022-05-16 06:48:14
Img和span元素以两行形式显示，没有任何css。这是因为继承吗？
<html lang="en">
<head>
<title>Manage your account</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header class="sticky w-full h-14 top-0 left-0 bg-red-100 border-b">
<div class="w-[1280px] mx-auto flex justify-between items-center">
<div class=" place-content-center">
<img src="tailwindcss-ar21.svg" alt="">
</div>
<div class="flex items-center">
<div class=" none ml-7 place-content-center">
<img src="user avatar.jpg" alt="" height="32px" width="32px">
</div>
<div class=" place-content-center"><a href="" class="font-bold">Settings</a></div>
</div>
</div>
</header>重要的那个。我认为与继承相关的错误类型，所以我粘贴上面的代码
<nav class="sticky top-14 w-40 bg-indigo-100">
<div>
<img src="./user avatar.jpg" alt="" width="32px" height="32px"><span>tabone</span>
</div>
<div>
<img src="./user avatar.jpg" alt="" width="32px" height="32px"><span>tabtwo</span>
</div>
</nav>
<article>
</article>
</section>
</body>
</html>
导航栏中的所有内容都显示在列中。甚至是img和span。img和span是内联元素。
为什么这些元素显示在一行中？跨距开始了一条新的线。
我尝试了flex属性，并给出了一个灵活的方向: column.It没有工作。
我尝试将内联块值附加到img元素，但仍然没有工作。
回答 1
Stack Overflow用户
发布于 2022-05-20 07:39:59
仅仅使用"flex“属性是不够的。您必须指定方向；它应该是flex而不是flex列。
检查这个片段，它将在一行中显示img和span：https://play.tailwindcss.com/M6JA6zMdol。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72255089
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号