css - 更改 flex-flow 包装列表的背景颜色
问题描述
我有一个没有预定数量项目的列表,但我需要控制它的容器的高度,所以我使用 flex-flow: wrap column 拆分列表。该列表最初是使用 jQuery slideToggle() 隐藏和显示的。
由于列表的背景是透明的,所以我试图找到一种对其进行着色并赋予其圆角的方法,但包含的 div 只是第一列的宽度。
如何使包含的 div 与列表的宽度相同,以便我可以正确设置它的样式?
$("#audit_search_btn").click(function () {
$("#image_list").slideToggle();
});
$("#image_list").click(function () {
$("#image_list").slideToggle();
});
#audit_search_btn {
height: 30px;
line-height: 30px;
background-color: $lilac;
border: $lilac-border;
color: $btn-text;
text-align:center;
border-radius: 5px;
font-size: 14px;
width:200px;
}
#image_list {
height: auto;
top:30px;
display: none;
position:absolute;
z-index: 99999;
}
ul{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: wrap column;
flex-flow: wrap column;
max-height: 100px;
}
.audit_search_jump {
margin-top:20px;
width:100%;
position: relative;
display: inline-block;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="audit_search_jump">
<div id="image_list">
<ul>
<!-- while loop populating list -->
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div id="content">
<div id="audit_search_btn">Image Quick Jump</div>
</div>
</div>
解决方案
您可以将坐标添加left
和right
定位到div
.
例子:
$("#audit_search_btn").click(function() {
$("#image_list").slideToggle();
});
$("#image_list").click(function() {
$("#image_list").slideToggle();
});
#audit_search_btn {
height: 30px;
line-height: 30px;
background-color: yellow;
border: 1px solid lilac;
color: black;
text-align: center;
border-radius: 5px;
font-size: 14px;
width: 200px;
}
#image_list {
height: auto;
top: 30px;
/* added */
left: 0;
right: 0;
display: none;
position: absolute;
z-index: 99999;
}
ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: wrap column;
flex-flow: wrap column;
max-height: 60px;
background: lightgrey;
}
.audit_search_jump {
margin-top: 20px;
width: 100%;
position: relative;
display: inline-block;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="audit_search_jump">
<div id="image_list">
<ul>
<!-- while loop populating list -->
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div id="content">
<div id="audit_search_btn">Image Quick Jump</div>
</div>
</div>
推荐阅读
- hyperledger - 如何将订单过滤器应用于超级账本作曲家 rest api
- python-2.7 - if语句麻烦——python
- sql - 使用到列到两列的递归查询
- python - 计算 JSON 文件中的唯一值
- javascript - 如何在 NW.js 中链接 node.js 的 STDOUT 和 python 的 STDIN
- c - C 有枚举控制的循环吗?
- firebase - Firestore - 在父集合中配置安全性并在子集合中使用而无需额外获取
- websocket - urwid + websockets + asyncio -- 服务器/客户端
- c++ - 为什么 Visual Studio 性能分析器不显示帧时间和 FPS 的任何内容?
- ios - UISegmentedControl 中的方面适合图像