Question

基本上，我在LI中有一个包含锚点的列表。 UL具有定义的宽度和自动溢出，因此如果锚中的文本扩展到比UL的宽度更宽，则它将水平滚动。

每个元素都设置为具有块级别显示，但是锚点仅扩展到UL的定义宽度，而不是（我想要发生的）扩展以包含其文本的边界。因此，我将丢失任何背景或边框样式，我将应用于溢出区域中的LI或锚点。

有没有办法可以让锚点围绕他们孩子的整个宽度而不在所有锚点上设置明确的宽度？

标记

<ul class="menu">
    <li><a href="#">0000000436274637264378234</a></li>
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
</ul>

CSS

.menu {
    display: block;
    width: 180px;
    overflow: auto;
    background-color: #eee;
    margin: 0px;
    padding: 0px;
}

.menu li {
    display: block;
    background-color: #fff;
    border-top: 1px solid #ccc;
    margin: 0px;
    padding: 0px;
}

.menu li a {
    display: block;
    padding: 5px;
}

Answer 1

.menu li {
    clear: left;
    float: left;
}

.menu li a {
    display: inline-block;
 /* display: block; */
}

Updated fiddle

如何在滚动列表中创建锚点延伸到其子项的宽度？

1 个答案: