html - 什么限制了元素的宽度？

Question

我用一些 jQuery 创建了一个水平的 CSS/HTML 菜单，如果父级不够宽，无法将所有内容都放在一行中，则可以将元素移动到下拉列表中。当元素移动到 #dropdown 时结果 <ul>它的宽度似乎受到限制，我不明白它在做什么？

jsFiddle

Answer 1

在您的 fiddle 的第 7 行，您正在动态创建一个 <ul>其中包含不适合您的菜单的菜单项。就是那个<ul>的宽度对于文本而言太小，这使得文本变成多行。如果你给那个菜单一个风格 white-space:nowrap , 它将使 <ul>占用尽可能多的宽度。下面的代码是内联的，但这只是一个例子。 http://jsfiddle.net/wf7h8/1/

var dropDownHTML = "<li id='dropdown'><a href='#'>Menu</a><ul style='white-space:nowrap;'></ul></li>";