CODEWITHSUNDEEP
htmlcssborderhtml-lists
Loolooii
Loolooii

Reputation: 9162

Border in unordered list doesn't fit the whole width of the div

I'm making a vertical unordered block list (inside a div), in which I have a border under each li. But somehow the borders don't fit the whole width of the div. I guess the ul has to exactly fit in the div in order to do this, but I don't know how.

This is screen shot of the div and the ul in it:

list in the div

And this is the CSS code I'm using:

.stats-list li{
    zoom:  1;
    border-bottom:1px solid #ececec;
    border-spacing:30px;
    display:block;
    text-align:left;
    margin-bottom:20px;
    color:#ffffff;
    height:40px;
}
.stats-list ul{
    list-style-type:none;

}

I've never come across this problem before. Does anyone have any solution? Thanks.

UPDATE (HTML code):

<div class="checkin-stats-right">
        <ul class="stats-list">
            <li>bla blaaa</li>
            <li>blaaaa</li>       
            <li>blaaaaaa</li>  
        </ul>

</div>

Another update (CSS code of the parent div):

.checkin-stats-right{
    background-color: #cfcfcf;
    width: 320px;
    height: 180px;
    margin-right: auto;
    float:left;
    margin-left:25px;
    margin-top:25px;

}

Upvotes: 2

Views: 4039

Answers (2)

fivedigit
fivedigit

Reputation: 18672

By default, the UL element usually has a padding-left set to a certain amount of pixels. Try this:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            .stats-list li {
                zoom:  1;
                border-bottom:1px solid #ececec;
                border-spacing:30px;
                display:block;
                text-align:left;
                margin-bottom:20px;
                color:#ffffff;
                height:40px;
            }

            ul.stats-list {
                list-style-type:none;
                padding-left: 0;
            }

            .checkin-stats-right {
                background-color: #cfcfcf;
                width: 320px;
                height: 180px;
                margin-right: auto;
                float:left;
                margin-left:25px;
                margin-top:25px;
            }
        </style>
    </head>
    <body>
        <div class="checkin-stats-right">
            <ul class="stats-list">
                <li>bla blaaa</li>
                <li>blaaaa</li>       
                <li>blaaaaaa</li>  
            </ul>

        </div>
    </body>
</html>

Upvotes: 1

Flo
Flo

Reputation: 1965

.stats-list ul {
  padding-left: 0;
}

Also note that "ul.stats-list" in your HTML doesn't match ".stats-list ul"

Upvotes: 1

Related Questions