html - 弹性容器项目不尊重高度
问题描述
今天需要一些关于 CSS flexbox 的帮助。我相信我已经正确配置了 flexbox,我希望每个列表项堆叠,然后每个 divli
执行 aspace-between
并使每个 div 中的内容垂直居中。这是为了自动完成..它实际上是如何显示的:(似乎不尊重高度设置)
我创建了一个代码片段,为了举例,从 angular.io 中删除了简化的代码。孤立的代码片段似乎工作正常!你们能看到其他可能导致问题的东西吗?
ul.search-result {
margin-top: 4px;
padding-left: 0;
outline: 0;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
position: absolute;
background: white;
z-index: 99;
display: none;
//width: 355px;
//height: 300px;
overflow: auto;
display: flex;
flex-direction: column;
}
li {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 60px;//60px;
padding: 10px;
background-color: #E9EDEF;
cursor: pointer;
list-style-type: none;
border: solid 1px red;
}
<ul class="search-result" style="width:500px;max-height:500px;">
<li>
<div class="icon">
image
</div>
<div class="title">
<div class="name">name</div>
<div class="location">location</div>
</div>
<div class="status">
status
</div>
</li>
<li>
<div class="icon">
image
</div>
<div class="title">
<div class="name">name</div>
<div class="location">location</div>
</div>
<div class="status">
status
</div>
</li>
<li>
<div class="icon">
image
</div>
<div class="title">
<div class="name">name</div>
<div class="location">location</div>
</div>
<div class="status">
status
</div>
</li>
</ul>
解决方案
最后,我只是简单地重新调整了我所有的 CSS 和 html 以遵循我在对该问题的最后评论中提到的这种方法。
谢谢你的麻烦。
推荐阅读
- r - 使用 R,我如何执行 bonferroni 类型测试来确定执行卡方检验后哪些区域的冠状病毒病例移动超出预期
- c# - 是否有 ac# 函数来测试两个双打是否“大致相等”?
- kamailio - 有什么方法可以接听或拨打 Kamailio 的电话吗?
- firebase - 在颤振上使用 FirebaseAuth.currentUser.getIdToken() 生成的 Firebase IdToken 在 Go 后端给出错误“无法验证令牌签名”
- python - 给定一个函数,如何获取传递给它的参数?
- python - 如何在我的第一个 pygame Python 项目中移动火箭
- python-3.x - 为什么构造函数中的实例变量没有显示在输出中?
- python - 如何使字符串按每个字母拆分
- azure - Azure Functions:了解多个应用上下文中的更改源
- apache-kafka - 为什么副本获取字节数大于允许的最大消息字节数?