我有this code here我正在尝试使 ul.submenu li 根据其内容进行拉伸(stretch)。正如您所看到的，ul.submenu 的第三个 li 有一个很长的文本，它隐藏而不是拉伸(stretch) li。
我尝试使用各种组合更改 DOM 上所有元素的 display 属性，但我无法正确执行。
我做错了什么以及为什么会发生这种情况？我错过了什么？
任何帮助将不胜感激! :)
最佳答案
由于 block 显示和绝对定位，目前文本对布局影响不大。
您可以通过指定 li 的 display: inline-block 和 white-space: nowrap 来更改此设置。我有forked an example其中子菜单的长度与最长元素所需的长度相同。
说明
inline-block 给出了 inline 和 block 的元素属性 display: inline ，因为该元素应该像文本一样流动，并从它包含的文本中获取其初始布局和尺寸。但是 block 部分意味着您还可以指定顶部和底部填充和边距、清除等。即使使用此设置，包含元素仍然是绝对定位的(大多数文本内容只要需要就可以流动)因为通常包含 block 元素会填充 100% 宽度——绝对、相对和固定元素的情况除外)，所以它的本能是折叠到最小宽度，即第一个单词的宽度。但是，如果我们使用 white-space: nowrap，我们可以强制文本根据需要扩展，因此使用完整的句子作为度量。
关于html - css基于内容拉伸(stretch)li，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14981555/