Question

我的目的是让悬停宽度达到文件资源管理器div的全宽，适用于任意数量的内部ul和li项目。我的意思是蓝色悬停应该是全宽。请帮忙。

enter image description here

以上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（less）是：

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，因为它会将该图标大小与容器的字体大小联系起来。易于维护。

另外，提交一种报价！你正在使用单引号和双引号 - 坚持一个！我更喜欢双引号，因为这是XHTML的遗产。

最后，你应该在跨度之前放置空间，而不是在其中。它更具有语法意义。

哦，如果您使用的是HTML5，则不需要自动关闭标签。 HTML5已经知道<image>代码应该如何运作。

Answer 2

您可以在 LI 元素上使用：before 之前的伪元素来实现所需的效果。将伪元素设置为根 UL 元素中的绝对位置，并将z-index设置为一个值，该值将其置于 LI 元素下。

li {
   height: 1.2em;
   line-height: 1.2em;
}

li:before {
  content: "";
  height: 1.2em;
  left:0;
  position: absolute;
  right: 0;
  z-index: -1;
}

.li:hover:before {
  background-color: yellow;
}

另请参阅https://jsfiddle.net/Daniel_Evers/wc2owtej/，其中包含一个简单的Tree-List-View示例中的效果。

Answer 3

修好拼写错误后，它对我来说很好。 Give it a shot here.

HTML是一样的。以下是更正的 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;
}
ul li:hover {
    background-color: #63B0C3;
    color:white;
}
span {
    position:relative;
    top:2px;
    left:4px;
}

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

3 个答案: