ul，带有背景图片和左浮动li项

Question

I have a ul list with background image

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background: url("../images/columns_sep_thumbs.png") repeat-y 50% 0;
}

With the following style for li

li {
    float: left;
    width: 220px;
    margin: 0;
    padding: 20px 15px;
    list-style: none;
    text-align: center;
}

the image disappears when li items float left, any suggestions?

<ul>
        <li>
            content1
        </li>
        <li>
            content2
        </li>
        <li>
            content3
        </li>
    </ul>

Answer 1

Add clearfix pseudo element to the ul

ul:after {
    content: "";
    clear: both;        
    display: table;
}