css - ul li 背景是全宽没有边距和填充？

Question

我的目的是让悬停宽度达到文件浏览器 div 的全宽，对于任意数量的内部 ul 和 li 元素。我的意思是蓝色悬停应该是全宽的。请帮忙。

上面 ul li 列表的代码是:

<div id="files_list_explorer">
                    <ul>
                        <li><img src='folder.png' height="14px" /><span> Android</span></li>
                        <li><img src='folder.png' height="14px" /><span> Android</span></li>
                            <ul>
                                <li><img src='folder.png' height="14px" /><span> Android</span></li>
                                <li><img src='folder.png' height="14px" /><span> Android</span></li>
                                <li><img src='folder.png' height="14px" /><span> Android</span></li>
                                <li><img src='folder.png' height="14px" /><span> Android</span></li>
                            </ul>
                        <li><img src='folder.png' height="14px" /><span> Android</span></li>
                        <li><img src='folder.png' height="14px" /><span> Android</span></li>
                    </ul>
                </div>

css(少)是:

div#files_list_explorer{
        background-color: white;
        color:black;
        ul{             
            padding-left: 15px;
        }
        ul li{
            height:30px;
            line-height: 25px;
            list-style-type: none;
            cursor:pointer;
            &:hover{
                background-color: #63B0C3;
                color:white;
            }
            span{
                position:relative;
                top:2px;
                left:4px;
            }
        }
    }

Answer 1

从根本上说，您的 <ul>元素被填充到左侧，并嵌套 <ul>得到越来越多的填充。使用此设置，我无法想象会有可用的“单行解决方案”。

相反，一个，我会更改 padding-left存在于<li>元素本身。这将解决一个问题(您会注意到您的顶级元素的悬停状态将显示为全宽)，但我们还有一个变化，它可能很重要。

更新:我没有将类名附加到您的列表元素，而是更新了代码以简单地使用后代子选择器。这将允许您使用相同的标记但产生相同的效果。

Here's an example which solves the problem .

我还进行了一些简单的更新。首先，你不应该需要那个 height: 14px在每张图片上，您都可以使用 CSS 声明。其次，您可能会想要使用 1em而不是 14px，假设你的字体大小在 <li>也是 14px，因为它会将图标大小与容器的字体大小联系起来。更易于维护。

此外， promise 一种报价!您正在使用单引号和双引号 - 坚持一个!我更喜欢双引号，因为那是 XHTML 的遗产。

最后，您应该将该空格放在 范围之前，而不是在范围内。它在语法上更有意义。

哦，如果您使用的是 HTML5，则不需要自闭标签。 HTML5 已经知道如何 <image>标签应该有效。