ul li background to be full width without margin and padding?

Question

My intention is to get the hover width to full width of file explorer div, for any number of inner ul and li items. I mean the blue hover should be full width. Please help.

the code for above ul li listing is :

<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>

and the css (less) is :

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

Fundamentally, your <ul> element is being padded to the left there, and nested <ul>'s get increasingly more padded. With this setup, I can't imagine theres a "one line solution" available.

Instead, one, I would change that padding-left to exist on the <li> element itself. This will solve one problem (you'll notice your top level items will have their hover state appearing to be full width), but we still have one more change, and it may be significant.

Update: Rather than appending class names to your list elements, I've updated the code to simply use descendent child selectors. This will allow you to use the same markup but generate the same affect.

Here's an example which solves the problem.

I've also made a couple simple updates. For one, you shouldn't need that height: 14px on each image, you can state that with CSS. Secondly, you probably will want to use 1em rather than 14px, assuming your font size in the <li> is also 14px, as it will tie that icon size to the font size of the container. Easier maintainability.

Additionally, commit to a kind of quote! You're using single quotes and double quotes - stick to one! I prefer double quotes as that was the legacy of XHTML.

And finally, you should put that space before the span, rather than inside it. It makes a little more syntactical sense.

Oh, and if you're using HTML5, there's no need for the self closing tag. HTML5 already knows how an <image> tag should work.

Answer 2

You can use the pseudo element :before on your LI elements to achieve the desired effect. Set the pseudo element to an absolute position within the root UL element and set the z-index to a value, which brings it underneath the LI element.

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;
}

See also https://jsfiddle.net/Daniel_Evers/wc2owtej/, which contains the effect in a simple Tree-List-View example.