时间戳

首页 > 解决方案 > 如何根据内容调整绝对子元素的大小，包括大于父元素？

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

问题描述

我正在创建一个下拉菜单，并希望菜单下拉菜单能够根据其内容调整大小，而菜单“标题”保持固定宽度。因此，如果下拉项的文本比父标题长，则下拉区域将大于标题，否则，下拉菜单将按标题调整大小。下拉选项中的文本不应该换行我知道这可以通过 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

标签： htmlcss

解决方案

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

添加white-space: nowrap;到.dropdown元素会强制文本不换行，从而将 div 扩展到父大小之外。添加min-width: 100%可确保下拉列表不会小于父级。

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

推荐阅读