HTML Element Style How to - Fit Border in unordered list to the whole width of the div

Question

We would like to know how to fit Border in unordered list to the whole width of the div.

Answer


<!DOCTYPE html>
<html>
    <head>
        <style>
            .stats-list li {<!--  ww w  .  j a  v a 2 s.c o  m-->
                zoom:  1;
                border-bottom:1px solid red;
                border-spacing:30px;
                display:block;
                text-align:left;
                margin-bottom:20px;
                color:black;
                height:40px;
            }

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

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

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

The code above is rendered as follows: