CODEWITHSUNDEEP
csshtml-lists
yourkishore
yourkishore

Reputation: 278

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

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.

enter image description here

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

Upvotes: 3

Views: 5280

Answers (3)

Daniel
Daniel

Reputation: 474

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.

Upvotes: 1

James Lai
James Lai

Reputation: 2071

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.

Upvotes: 1

Deryck
Deryck

Reputation: 7658

After fixing your typos it works fine for me. Give it a shot here.

HTML is the same. Here is the corrected 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;
}

Upvotes: 0

Related Questions