我希望我的嵌套<ul id='child'>适合父<il id='parent'> 宽度。
HTML：
<ul>
<li id='parent'>
<a href='#' id='setter'>$variable</a>
<ul id='child'>
<li>one</li>
<li>two</li>
</ul>
</li>
</ul>
CSS：
#setter {padding:0 15px; display:inline-block} /*as menu item*/
#child {...?}
问题是链接正在设置<li>宽度，因为链接文本是可变变量。换句话说，<li>宽度不能固定。
您可以float：<li>
#parent
{
float: left;
}
但是，如果 中的内容#child变得比#setter宽，则 的宽度<li>也会增长：
在这种情况下，您可以#child绝对定位：
#parent
{
float: left;
position: relative;
}
#child
{
position: absolute;
left: 0;
right: 0;
}
但是，这可能会导致布局流程问题（这可能是也可能不是问题）：
您可以使用 JavaScript 在运行时（而不是设计时）设置固定宽度。测量要使用其宽度的内联元素，并将其设置为父元素的固定宽度。
document.getElementById("parent").style.width =
document.getElementById("setter").offsetWidth + "px";
所有你需要的是
#child {margin: 0; padding: 0; }
如果您在其他地方设置了不同的宽度，也许还有 width: 100% 。
此外，它是<li>（“列表项”），而不是<il>. :-)
编辑：如果这是一个下拉列表，则<a>无论如何您都需要将 sub 包裹起来。这是一个更好的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
ul {list-style: none; margin: 0; padding: 0;}
#setter {background: red; display: block;}
#child {background: blue;}
</style>
</head>
<body>
<ul>
<li id='parent'>
<a href='#' id='setter'>$variable
<ul id='child'>
<li>one</li>
<li>two</li>
</ul>
</a>
</li>
</ul>
</body>
</html>
我会这样做：
#setter {
position:relative;
display:inline-block;
background:yellow;
padding:0 15px;
}
#child {
position:absolute;
background:red;
width:inherit;
}
可能需要调整填充。但我希望你明白。