主容器的设置高度等于其内容
主容器的设置高度等于其内容
提问于 2022-08-15 03:05:02
我有一个带有下拉元素的包装器。包装器的高度为fit-content。目前，包装器的高度等于在下拉中找到的input元素的高度，但它忽略了下拉中的ul的高度。如何使包装器的高度等于input的高度加上ul的高度？提前谢谢。
.wrapper {
width: 95%;
height: fit-content;
padding: 1%;
background-color: saddlebrown;
}
.wrapper .dropdown {
width: 100%;
height: fit-content;
background-color: aqua;
}
.wrapper .dropdown input {
width: 100%;
border: 1px solid #000000;
}
.wrapper .dropdown ul {
display: block;
width: 100%;
}
.wrapper .dropdown ul li a {
cursor: pointer;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="wrapper">
<div class="dropdown">
<input class="form-control" placeholder="Locate your item" />
<ul class="dropdown-menu">
<li><a class="dropdown-item">Item 1</a></li>
<li><a class="dropdown-item">Item 2</a></li>
</ul>
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-08-15 07:23:01
您正面临这个问题，因为根据引导类“下拉菜单”CSS被设置为position: absolute;，但在您的情况下，您需要它为position: relative;，以便包装器类可以将该<ul>视为其子元素。
因此，您需要添加一些CSS使您的<ul>成为position: relative;。
当前用于<ul>的CSS是：
.wrapper .dropdown ul {
display: block;
width: 100%;
}将其更改为
.wrapper .dropdown ul {
display: block;
width: 100%;
position: relative;
}Stack Overflow用户
发布于 2022-08-15 04:59:55
.wrapper .dropdown ul {
display: block;
width: 100%;
position: relative
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73360129
复制相关文章
点击加载更多
相似问题
使用python从MS word docx文件中逐页提取文本
在python中从MS word文件中提取文本
如何在C#中从MS office文档中提取文本
如何从python中的MS Word文件中提取文本？
Python将图像和文本从MS office文件中分离出来
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
