css根据内容拉伸li

Question

我在这里有这段代码，我正在尝试ul.submenu li根据其内容进行拉伸。如您所见，第 3li个ul.submenu有一个长文本，它隐藏而不是拉伸li.

我曾尝试display使用各种组合更改DOM 上所有元素的属性，但我无法做到。

我做错了什么，为什么会发生这种情况？我错过了什么？

任何帮助将不胜感激！:)

Answer 1

由于块显示和绝对定位，目前文本对布局的影响很小。

您可以通过提供lisdisplay: inline-block和来更改此设置white-space: nowrap。我已经分叉了一个示例，其中子菜单的长度与最长的项目所需的一样长。

解释

inline-block给出元素的属性inline和block显示：inline因为元素应该像文本一样流动，并从它包含的文本中获取其初始布局和尺寸。但是这block部分意味着您还可以指定顶部和底部的填充和边距、清除等。即使有了这个集合，包含元素仍然是绝对定位的（大多数文本内容只是根据需要流动，因为通常包含块元素填充 100 % 宽度 - 绝对、相对和固定元素不是这种情况），因此它的本能是折叠到最小宽度，即第一个单词的宽度。但是如果我们使用white-space: nowrap，我们可以强制文本根据需要扩展，因此使用完整的句子作为度量。