CODEWITHSUNDEEP
htmlcss
2339870
2339870

Reputation: 1487

How can I make the background of an li the same length as the text in it?

I have the following HTML:

<div id="resultList">
    <ul>
        <li class="product"> <a href="#" title="">Hevea fopspeentje Kroon</a>

        </li>
        <li class="product"> <a href="#" title="">BabyBjörn Babybord met babylepel 2-Pack</a>

        </li>
        <li class="product"> <a href="#" title="">Janod Scooter Vanilla</a>

        </li>
        <li class="product"> <a href="#" title="">Numi-Med Medicijnspeen met doseerschijf Wit (6-18 mnd)</a>

        </li>
    </ul>
</div>

and CSS:

#resultList {
    max-width: 557px;
    margin-top: 13px;
    padding: 20px;
    border: 4px solid #c7c6c6;
    border-radius: 4px;
    background: #ffffff;
}

#resultList a {
    padding: 8px 14px;
    color: #072f49;
    text-decoration: none;
    display: block;
}
#resultList ul li {
    margin-bottom: 10px;
    color: #072f49;
    list-style: none;
    background: #f5f5f5;
    display: inline-block;
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}

#resultList .product {
    width: 100%;
    display: inline-block;
}

and the jsFiddle

I would like each product do be on a different line. That is why I set #resultList .product to width:100; However, I would like the background of the #resultList ul li to only be as long as the text itself.

Is there a way to do this?

Upvotes: 1

Views: 867

Answers (3)

Manibharathi
Manibharathi

Reputation: 945

add background css code for a and remove background in li. Demo

#resultList a {
    background:#F5F5F5;
    color: #072F49;
    display: block;
    float: left;
    padding: 8px 14px;
    text-decoration: none;
}

#resultList ul li {
    margin-bottom: 10px;
    list-style: none;    
    display: inline-block;
}

Upvotes: 2

Nico O
Nico O

Reputation: 14112

Move the background-color to the <a> element inside the <li>.

http://jsfiddle.net/NicoO/7nR7T/4/

#resultList ul li {
    margin-bottom: 10px;
    list-style: none;
    display: block; 
}

#resultList .product A {
    color: #072f49;
    background: #f5f5f5;
    display: inline-block;
}

Upvotes: 5

Justin George
Justin George

Reputation: 344

You can make the width:inherit instead of setting to 100% in #resultList .product.

Updated fiddle. DEMO.

Upvotes: 0

Related Questions