Question

我正在创建一个下拉菜单，希望菜单下拉菜单能够根据其内容调整大小，而菜单“标题”保持固定宽度。因此，如果下拉菜单项的文本比父标题的文本长，则下拉菜单区域将比标题大，否则下拉菜单将调整为标题大小。下拉选项中的文字不应该自动换行，因为我知道这可以通过javascript使用，但是可以仅使用CSS来完成吗？

所以我有一个带有以下HTML的菜单：

<div class="menu">
  <div class="menu-item">
    <div class="title">Menu Title 1</div>
  </div>
  <div class="menu-item">
    <div class="title">Menu Title 2</div>
    <div class="dropdown">
      <div class="option">Menu Option 1</div>
      <div class="option">Menu Option 2</div>
      <div class="option">Long Menu Option 3</div>
    </div>
  </div>
  <div class="menu-item">
    <div class="title">Menu Title 3</div>
  </div>
  <div class="menu-item">
    <div class="title">Menu Title 4</div>
  </div>
</div>

使用以下CSS样式：

html, body, .menu{
  margin:0;
  padding:0;
  width:400px;
}

.menu-item{
  width: calc(25% - 2px);
  float:left;
  position:relative;
}

.title{
  border: 1px solid #000
}

.dropdown{
  position:absolute;
  left:0;
  top:100%;
  background-color:#fff;
  /* width:138px; /* uncomment this for desired effect */
}

.option{
  border: 1px solid #000;
}

演示（将width: 138px;添加到.dropdown样式中以查看所需的效果）：https://codepen.io/anon/pen/LXyKBJ

Answer 1

询问后不久我找到了解决方案！

在white-space: nowrap;元素中添加.dropdown会强制文本不自动换行，从而使div超出父级大小。添加min-width: 100%可确保下拉列表的宽度不会小于父窗口的宽度。

我专注于宽度和显示属性，却错过了这个明显的解决方案。

如何根据内容（包括大于父元素）调整绝对子元素的大小？

1 个答案: