使不同的li（父子）宽度相同答案

【问题标题】：Making different li (parent and child) the same width使不同的li（父子）宽度相同
【发布时间】：2020-08-31 01:03:18
【问题描述】：

我正在创建一个水平的ul 导航栏。每个li 项目的宽度不同。我想在下拉菜单中使下拉“子”li 项目的长度/宽度与“父”li 项目的长度/宽度相同。正在考虑使用 jQuery，所以它会是这样的：

jQuery("ul#menu li").width(); = jQuery("ul#menu ul li").width();

这显然是行不通的，但希望它能让我更多地了解我正在尝试做什么。谢谢你的帮助。如果可以只使用 CSS 就更好了。

【问题讨论】：

【解决方案1】：

jQuery 似乎是一个糟糕的解决方案。

我会为每个父 li 添加一个类。

<li class="home"><!--nest ul goes here--></li>
<li class="about"><!--nest ul goes here--></li>
<li class="products"><!--nest ul goes here--></li>

然后你可以针对每一个和它的孩子专门：

.home, .home ul li { width: 150px; }
.about, .about ul li { width: 220px; }
.products, .products ul li { width: 100px; }

【讨论】：

克里斯，你的权利，这将是最好的解决方案，但在我的情况下，我正在为客户建立一个网站，他们可能会在我离开后添加链接，所以我正在寻找一个更动态的解决方案，无论如何，谢谢。

【解决方案2】：

我认为如果您的嵌套项目之一（下拉子项）大于您的主项目，则会出现问题！如果是这样的话，你的孩子应该指定你父母的大小！

或者这正是你所要求的？

【讨论】：

【解决方案3】：

除非我弄错了 jQuery 的宽度如何作用于元素数组，否则 Johlin 的回答的问题是无法知道哪个 LI 的宽度将用作新宽度。
CSS 意味着宽度是静态的，如果您需要更改 LI 的内容，您可能也必须更改 CSS。如果这不是问题，那么 CSS 肯定是要走的路。
另一种 jQuery 方法是：

$('ul#nav li').each(function () {
    $(this).find('li').width($(this).outerWidth(true));
});

这会将所有子 LI 的宽度设置为父宽度

【讨论】：

Vmex151，这几乎对我有用，问题是我认为填充和“宽度”属性的所有内容都有点偏离。有没有办法使用 jQuery .css('width') 方法来做到这一点？感谢您的帮助。
hereandnow78 提出了一个很好的观点，即假设父母总是比孩子大。 .width() 取决于您的 jQuery 版本，使用 $(this).find('li').width($(this).outerWidth(true)); 返回略有不同的值（包括/不包括填充）；将拉入整个宽度，包括填充/边框/边距。

【解决方案4】：

语法是：

jQuery("ul#menu li").width(jQuery("ul#menu ul li").width());

这应该可行！

【讨论】：