html - DIV width like parent DIV (Parent DIV's width is not set)

Question

我的下拉菜单有问题。我已经制作了这段代码(在 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>

Answer 1

只需在现有属性中添加以下额外的 CSS

.multi_select {
     position: relative;
}

.select_checkbox {
    width: 100%;
}