时间戳

首页 > 解决方案 > 获取具有绝对位置的父元素的子元素的宽度

html - 获取具有绝对位置的父元素的子元素的宽度

问题描述

允许子元素根据文本的长度进行扩展，使其具有自己的宽度，并且不受父母的宽度限制，如您在所附的图片中看到的那样。https://i.stack.imgur.com/uZ0JN.png

<ul id="nav">
  <li>
    <span>Solutions</span>
    <div class="sub-cont">
      <ul class="sub-nav">
        <li><a href="#">New Seller Suite</a></li>
        <li><a href="#">Pro Seller Suite</a></li>
        <li><a href="#">Advanced Seller Suite</a></li>
        <li><a href="#">Assisted Seller Suite</a></li>
        <li><a href="#">Managed Seller Suite</a></li>
      </ul>
    </div>
  </li>
</ul>


 ul#nav {
  display: flex;
  > li {
    position: relative;
    display: block;
    margin: 0px 28px;

    .sub-cont {
      height: 0%;
      position: absolute;
      top: 40px;
      left: -20px;
      width: 100%;

      ul.sub-nav {
        padding: 20px 20px 12px 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 4px 5px 5px rgba(0, 0, 0, 0.12);
        transform: translateY(5px);
        opacity: 0;
        visibility: hidden;
        /* autoprefixer: off */
        transition-property: opacity, transform, visibility;
        transition-duration: 600ms, 900ms, 300ms;
        transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1),
        cubic-bezier(0.23, 1, 0.32, 1), linear;
      }
    }
  }
}

标签： htmlcssdom

解决方案

所以你想要突破的元素可以使用：
width: auto; 空白：nowrap；<<--- 这就是推动容器扩大内容宽度的原因

推荐阅读