css - 内容不会扩展到设置了最小宽度和最大宽度的 div - 宽度始终停留在最小值

Question

我有一个包含 <a> 的菜单容器具有不同长度字符串的标签。

当我为我的菜单容器提供以下 CSS 时，我的菜单始终静态设置为最小宽度(在本例中为 200px)。我想要更长的字符串推出直到最大宽度。如果我不设置最小宽度，容器会因为 nav-bar 变得很小s 宽度 50px . navbar在另一个带有单独 CSS 文件的 React 文件中。如何使菜单不受导航宽度的控制？

*如果<a>，内容只会扩展到超过它设置的最小宽度包含一个没有空格/分词符的字符串。

这是一个带有行为示例的代码笔: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;
    }

react

 <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 标签显示 block ，同时为菜单容器提供带有最小值和最大值的内联 block 显示按照描述呈现菜单。