如何使父列表元素忽略其子元素's宽度

How can I make my parent list element ignore its children's width?

本文关键字:宽度 元素 列表元素 何使父      更新时间:2023-09-26

我有一个菜单,由下面的列表构建:

<ul>
   <li></li>
   <li></li>
   <li>
      <ul>
          <li></li>
      </ul>
   </li>
   <li></li>
   <li></li>
</ul>

列表中的子菜单项只有在悬停其父列表元素时才会显示。但是,子列表元素的宽度将迫使父元素具有相同的宽度,并且当您悬停菜单时,它将使菜单更改大小。

我有什么办法可以防止这种情况发生吗?

将CSS类添加到元素中。(一个用于外部<ul>,每个初始<li>元素相同,然后重复到内部列表。)

使用CSS选择器定义<ul>的静态宽度,并可能在<li>元素中添加word-wrap

在包含元素上设置一个固定的宽度(因此是顶层ul)。子元素将在宽度内换行(边缘情况除外,例如空白:在某个子菜单项上换行)。

make定义父元素的宽度并设置相对于所有子元素的位置也尝试父的绝对位置