我的下拉菜单有问题。 我已经制作了这段代码(在 w3schools 的帮助下)... :)
问题是当我将鼠标悬停在 div 上时出现的 div,“subdiv”宽度与父级不同。
我试图分配给“select_checkbox”。
如果我将“multi_select”的宽度设置为像素固定,然后将“select_checkbox”的宽度设置为100%,我就解决了这个问题,但我不想为“multi_select”设置一个固定的宽度。
有没有办法不用 javascript 就可以实现?
谢谢
.multi_select {
display: inline-block;
width: auto;
}
.div_select {
font-size: 14px;
border: 1px solid black;
background-color: #EEE;
padding: 0px 5px 0px 3px;
cursor: pointer;
}
.div_select::after {
font-family: FontAwesome;
content: "\f0d7";
padding-left: 5px;
padding-right: 5px;
}
.multi_select_cat:hover .select_checkbox,
.multi_select_num:hover .select_checkbox{
display: block;
}
.select_checkbox {
position: absolute;
display: none;
background: #EEE;
border: 1px solid black;
border-top: 0px;
width: inherit;
}
.select_checkbox div {
display: block;
width: 100%;
}
.select_checkbox div:hover {
cursor: pointer;
background-color: #F60;
}
.select_checkbox_show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="multi_select multi_select_num">
<div class="div_select noselect">
Numero elementi da mostrare
</div>
<div class="select_checkbox">
<div>10</div>
<div>20</div>
<div>30</div>
</div>
</div>
<div class="multi_select multi_select_cat">
<div class="div_select noselect">
Filtra per categoria
</div>
<div class="select_checkbox">
<div><input type="checkbox"> Sistemi</div>
<div><input type="checkbox"> Strumenti</div>
<div><input type="checkbox"> Automotive</div>
</div>
</div>
最佳答案
只需在现有属性中添加以下额外的 CSS
.multi_select {
position: relative;
}
.select_checkbox {
width: 100%;
}
关于html - DIV width like parent DIV (Parent DIV's width is not set),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49447120/