Question

我有一个菜单容器，其中包含带有各种长度的字符串的<a>标签。

当我为菜单容器提供以下CSS时，我的菜单始终静态设置为最小宽度（在这种情况下为200px）。我希望更长的字符串推出直到最大宽度。如果我未设置最小宽度，则由于nav-bar的宽度50px，容器将变得非常小。 navbar在另一个带有单独CSS文件的React文件中。如何从导航栏的宽度中分离菜单？

*如果<a>包含不带空格/分字符的字符串，则内容仅会扩展超过其设置的最小宽度。

这是一个带有行为示例的codepen：https://codepen.io/vee1234/pen/omQxWP

CSS

  .nav-bar {
     width: 50px;
    }

    .hover-menu {
      display: inline-block
      min-width: 200px;
      max-width: 400px;
      width: 100%
      position: relative;
      left: 40px;
    }

    .link a {
      line-height: 35px;
      color: #d8d8d8;
      width: 100%;
      height: auto;
    }

反应

 <Nav className={navbar}>   
   <Menu>
    <div className={hover-menu}>
      <div className={links}>
        <a>some text</a>
        <a>some longer text that never expands past 200px</a>
      </div>
      </Menu>
    </Nav>
 </div>

Answer 1

尝试一下：

.menu {
  display: inline-block;
  min-width: 200px;
  max-width: 400px;
}

.link a {
  display: block;
  line-height: 35px;
  color: #d8d8d8;
  height: auto;
  word-wrap: break-word;
}

我认为您遇到的问题是所有链接都已对齐。我希望我假设您是要堆叠它们的意思是正确的...如果是，则使a标签显示块，同时为菜单容器提供带有最小和最大值的内联块显示，以呈现菜单如所述。

Answer 2

实际上，您可以通过使用位置来防止hover-menu符合父级的宽度约束。在这种情况下，menu标签将具有

position:relative;

并且类hover-menu将具有

position:absolute;
left:0;

，您最好在hover-menu上指定其他CSS规则。

内容不会扩展为具有最小宽度和最大宽度设置的div-宽度始终停留在最小

2 个答案: