Question

我希望我的嵌套<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>宽度无法修复。

Answer 1

您可以float <li>：

#parent
{
    float: left;
}

http://jsfiddle.net/G3TBn/4/

但是，如果#child中的内容比#setter更宽，<li>的宽度也会增长：

http://jsfiddle.net/G3TBn/5/

在这种情况下，您可以绝对定位#child：

#parent
{
    float: left;
    position: relative;
}
#child
{
    position: absolute;
    left: 0;
    right: 0;
}

http://jsfiddle.net/G3TBn/6/

但是，这可能会导致布局流程问题（这可能是也可能不是问题）：

http://jsfiddle.net/G3TBn/7/

您可以使用JavaScript在运行时设置固定宽度（而不是设计时间）。测量要使用其宽度的内联元素，并将其设置为父元素的固定宽度。

document.getElementById("parent").style.width = 
    document.getElementById("setter").offsetWidth + "px";

http://jsfiddle.net/G3TBn/2/

Answer 2

你需要的只是

#child {margin: 0; padding: 0; }

并且可能宽度：如果您在其他地方设置了不同的宽度，则为100％。

此外，它是<li>（“列表项”），而不是<il>。： - ）

编辑：如果这是一个下拉列表，你需要将<a>包裹在子`周围。这是一个更好的方法：

<!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>

Answer 3

我会这样做：

#setter {
    position:relative;
    display:inline-block;
    background:yellow;
    padding:0 15px;
}
#child {
    position:absolute;
    background:red;
    width:inherit;
}

可能需要调整填充。但我希望你明白这一点。

demonstration

<ul>适合父<li>宽度</li> </ul>

3 个答案: