Question

我已经阅读了一些关于CSS3计算的内容，但我特别难以找到它。我正在建立一个带有下拉菜单的网站，我希望下拉菜单与父项目的宽度相匹配，父项目的宽度可变。我总是可以为每个下拉菜单设置一个特殊的id或类，但这有点痛苦。

HTML的结构如下：

<ul>
    <li>
        <a href="#">Parent Item</a>
        <ul class="sublist">
            <li><a href="#">Sub Item</a></li>
            <li><a href="#">Sub Item</a></li>
        </ul>
    </li>
    <li><a href="#">Normal Item</a></li>
    <li><a href="#">Normal Item</a></li>
    <li>
        <a href="#">Parent Item</a>
        <ul class="sublist">
            <li><a href="#">Sub Item</a></li>
            <li><a href="#">Sub Item</a></li>
        </ul>
    </li>
    <li><a href="#">Normal Item</a></li>
</ul>

有没有办法使用CSS3将其设置为width = parent width或者什么？

Answer 1

将div项中的父项包装并将ul放在该div中，其宽度设置为100％（如果要填充，则为更少）和position：relative。

所以...

<li>
    <div id='parent'><a href....></a>
        <ul class='sublist' style='width:100%;'>
            <li>...</li>
        </ul>
    </div>
</li>

您可能需要使用position：相对于子列表ul来增强它，具体取决于您现有的样式。戴夫

宽度=父宽度CSS3

1 个答案: