list item blocks background-image of parent div by expanding background-color to 100%

Question

It seems that when an element has display:block, the background-color of that element extends to 100% of the width of the parent element (as it is intended). I would like instead for the background-color to extend only to the edge of the text, so that the parent element's background-color is visible. I would use a float or inline-block, but it is also important that each element exist on a new line.

CSS Code:

body {
    background-color:#fff;
    color:#1a1a1a;
    font-family: inconsolata;
    font-size:13px;
}
#content {
    position:absolute;
    width:50%;
    left:25%;
    top:5%;
}
.entry {
    /*background-color: #1a1a1a;*/
    background-image:url('images/stripe3.png');
    color:#f00;
    /*padding:1px;*/
}
ul {
    display:block;
}
li {
    background-color:#fff;
    margin-left:20px;
    padding: 0px 4px;
}

HTML code:

<div id="content">
    <div class="entry">
        <ul>
             <li>
             the illuminator : ongoing : projection, social practice
         </li>
         <li>
             color organisms : 2014 : projection, net art
         </li>
        </ul>
    </div>
</div>

***background-color applied only to the text*** so just use `color` instead? or you mean the background-color affected area should be shrunk close to the text as much as possible? — King King, May 29 '14 at 05:53
// has always worked for me as long as it's inside the code brackets — prismspecs, May 29 '14 at 06:09
@prismspecs improve your question, its not clear what exactly you want. — Kheema Pandey, May 29 '14 at 06:10
@prismspecs: did you see the fiddle i linked to? is that what you want? — Abhitalks, May 29 '14 at 06:12
prismspecs: @Lost is right, listen to him please. `//` is not standard and is a hack. `/*..*/` is standard. Reference: [(here)](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments) and [(here)](http://www.w3.org/TR/CSS21/syndata.html#comments). Also, take time to read [(this)](http://stackoverflow.com/questions/12298890/is-it-bad-practice-to-comment-out-single-lines-of-css-with). — Abhitalks, May 29 '14 at 06:16
abhitalks, thank you. it is close, however i don't want an arbitrary distance from the right side of the container but rather for the background-color to come to the right edge of the text of each line item, does that make sense? — prismspecs, May 29 '14 at 06:52
@prismspecs what is close? LOL, what *abhitalks* said was about the use of `//` to comment in CSS, which is invalid. That's all. Not related to your actual problem in this question. For your question, No it still makes less sense. — King King, May 29 '14 at 08:30
@KingKing um... his jsFiddle demo is close to what I want to achieve. Please don't post spam. — prismspecs, May 29 '14 at 17:02
@prismspecs it's not spam, it's just a misunderstanding, in fact his demo was posted some comments above the last comment of him. — King King, May 29 '14 at 17:04

score 1 · Accepted Answer · answered May 29 '14 at 09:44

The point is that you have a pure text node inside the li which is difficult to select in CSS.

It is more common for text to be wrapped in some form of text tag such as a p, span or commonly in a list item an anchor tag a.

Thusly;

<div class="entry">
<ul>
    <li>
        <a href="#">the illuminator : ongoing : projection, social practice</a>
    </li>
    <li>
        <a href="#">color organisms : 2014 : projection, net art</a>
    </li>
</ul>
</div>

In this way, you can just target the anchor tag directly like so

.entry {
    background-color: #1a1a1a;
    color:#f00;

}
ul {
    display:block;
}
li {
    background-color:#fff;
    margin-left:20px;
    padding: 0px 4px;
}

li a { /* select anchor tag */
    background-color: lightblue;
}

However, this might restrict the clicking area of your link so one might decide to make the anchor tag display:block also...and we're back where we started.

So, wrap the text again in an inline element such as a span and target that instead.

Revised HTML

<div class="entry">
    <ul>
        <li>
            <a href="#"><span>the illuminator : ongoing : projection, social practice</span></a>
        </li>
        <li>
            <a href="#"><span>color organisms : 2014 : projection, net art</span></a>
        </li>
    </ul>
</div>

Revised CSS

.entry {
    background-color: #1a1a1a;
    color:#f00;

}
ul {
    display:block;
}
li {
    background-color:#fff;
    margin-left:20px;
    padding: 0px 4px;
}

li a {
    background-color: lightblue;
    display: block;
}

li a span  { /* like this */
    background-color: yellow;
}

JSfiddle Final Demo.

Finally, if you wish to see the background of the ul, remove the background colors from the li and a - like this - http://jsfiddle.net/8QMvr/8/

list item blocks background-image of parent div by expanding background-color to 100%

1 Answers1