<ul> 适合父<li>宽度

我希望我的嵌套<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;
}

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/

你所需要的是

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

和width: 100%，如果你在其他地方设置了不同的宽度。

另外，它是<li> ("List Item")，而不是<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;
}

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

演示

相关内容

最新更新

热门标签：