当父级具有相对定位时，将忽略悬停菜单的最大宽度

debugcn 发表于 Dev

用户10782250

当父元素是相对的时，绝对定位元素的宽度受到限制

我有一个导航栏，它有一个悬停菜单。菜单将包含标签，标签中文本的长度会有所不同。

我希望菜单具有最小和最大宽度，子 div 必须将最小宽度/最大宽度设置为。但无论菜单的宽度如何，都被限制在最小宽度点上。

是否有可能让子 div 忽略父级的宽度，同时仍将其保留为子级（我无法将其移出父级，我知道这是一个简单的解决方案）？

这是我遇到的行为示例：https : //codepen.io/vee1234/pen/omQxWP

.navBar {
  background-color: #222;
  width: 50px;
  min-height: 100%;
  height: 100vh;
}

.navItem {
  color: #a1a1a1;
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
}

.menu {
font-family: "Open Sans", sans-serif;
  position: absolute;
  display: none;
  min-width: 200px;
  max-width: 600px;
  background-color: #333;
  z-index: 100;
  left: 100%;
  top: 20%;
}

.menu div a {
  display:block;
  border: 1px solid red;
}

.navItem:hover .menu {
  display: block;
}

 <div class="navBar">
    <div class="navItem">
      <div>Nav Menu Trigger</div>
      <div class="menu">
        <div class="link">
          <a>string of any length</a>
          <a>string of any length - but this one is super long</a>
        </div>
      </div>
    </div>
    <div class="navItem">
      <div>Nav Menu Trigger</div>
      <div class="menu">
        <div class="link">
          <a>string of any length</a>
          <a>string of any length - but this one is super long</a>
        </div>
      </div>
    </div>
     <div class="navItem">
      <div>Nav Menu Trigger</div>
      <div className="menu">
        <div className="link">
          <a>string of any length</a>
          <a>string of any length - but this one is super long</a>
        </div>
      </div>
    </div>
  </div>

陪伴阿菲

一个技巧是通过添加一些padding-right不会影响文本进入内部但将在绝对元素的宽度计算中计数的相对元素使相对元素更大。然后只需为您想要的部分着色。您还可以添加负边距以纠正添加的填充。

.menu {
  width:50px;
  padding-right:500px;
  margin-right:-500px;
  background:#000 content-box;
  height:100px;
  position:relative;
  color:#fff;
}

.menu div{
  position:absolute;
  top:0;
  left:50px;
  background:blue;
  min-width:200px;
  max-width:500px;
}
.menu div a {
  border:1px solid;
  display:block;
}

<div class="menu">
 some text here
  <div>
    <a>some text here</a>
    <a>some text here some text here some text here some text here some text here some text here some text here some text here</a>
    <a>some text here</a>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。