Question

我有一个ul导航菜单，其中包含等距的inline-block元素，每个元素都有一个子菜单。

问题是我无法将子菜单的宽度调整为子元素的长度。它继承了父级的宽度。

我可以设置一个固定的宽度，但由于我的每个子菜单都有不同长度的不同链接，我希望每个子菜单都有一个自动宽度，并且很好地适应它的内容。

长代码脚本的道歉。你可以在这里看到一个JSFiddle，它可能更好地解释这个问题：

HTML

<nav>
    <ul>
        <li><a href="">Section A</a><ul>
                <li><a href="">Longer Child Text</a></li>
                <li><a href="">Longer Child Text</a></li>
                <li><a href="">Longer Child Text</a></li>
            </ul>
        </li>
        <li><a href="">Section B</a>
             <ul>
                <li><a href="">Longer Child Text</a> </li>
                <li><a href="">Longer Child Text</a></li>
                <li><a href="">Longer Child Text</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

nav > ul {
    display: inline-block;
    text-align: justify;
}

nav > ul > li {
    display: inline-block;
    position: relative;
}

nav > ul > li > ul {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
}

nav > ul > li > ul > li > a {
    width: 100%;
    height: 100%;
    display: block;
}

nav > ul > li > ul:before {
    content:' ';
    width: 100%;
    height: 40px;
    position: absolute;
    top: -40px;
    left: 0;
}

nav > ul > li:hover > ul {
    display: inline-block;
}

nav > ul:after {
    content:' ';
    display: inline-block;
    width: 100%;
    height: 41px;
}

Answer 1

一种常见方法是将white-space: nowrap添加到所需元素。这样做时，元素的宽度将扩展以适合其内容。

Example Here

nav > ul > li > ul {
    display: none;
    text-align: left;
    position: absolute;
    top: 40px;
    left: 0;
    padding: 10px;
    background-color: #bfe17e;
    white-space: nowrap;
}

此外，您还可以为元素和text-overflow: ellipsis设置max-width，以防止元素占用过多的水平空间。像这样的东西会起作用：

Example Here

nav > ul > li > ul > li > a {
    max-width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
}

子元素自动宽度（大于父级）

1 个答案: