CODEWITHSUNDEEP
css
user244394
user244394

Reputation: 13448

Ordered list issue :How to add background color to each li in the ordered list?

enter image description here

How do I move the number inside the background colors as shown in the above image?

Can someone show me a working example?

JS fiddle

CSS

goals-list1 {
    padding-left:10px
}
.goals-list1 ol {
    border:0px solid red;
    padding:0;
    margin:0;
}
.goals-list1 ul {
    border:0px solid red;
    margin:0;
    padding:0;
}
.goals-list1 li {
    border:0px solid blue;
    color:#666666;
}
.goals-list1 .pink {
    color:#FF1493;
}
.goals-list1 .violet {
    color:#9400D3;
}
.goals-list1 .orange {
    color:#FFA500;
}
ol .goals-info {
    ;
    background-color:#f4f4f4;
    border-radius:10px;
    padding:5px;
}

HTML

<ol  class="goals-list1">
    <li class="pink goals-info">
        <ul class="list-unstyled">
            <li>Lifestyle</li>
            <li>son</li>
            <li>Inflation</li>
            <li>Aug 2012</li>
        </ul>
    </li>
    <li class="pink goals-info">
        <ul class="list-unstyled ">
            <li>Lifestyle</li>
            <li>son</li>
            <li>Inflation</li>
            <li>Aug 2012</li>
        </ul>
    </li>
</ol>

Upvotes: 0

Views: 86

Answers (2)

Douglas.Sesar
Douglas.Sesar

Reputation: 4420

add a background color to the ol element itself:

.goals-list1 ol{background-color:blue;}

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

You could use 

ol {list-style-position: inside;}

but there will be a little bit of extra rejigging of the ul's padding etc. after that.

Upvotes: 1

Related Questions