list

by Annett

HTML

<div id="menu-outeRunr">
    <div class="table">
        <ul id="horizontal-list">
            <li><a href="#"><img src="http://cache.vevo.com/Content/VevoImages/video/28A2DED686A9EDF8CD90F53ABF768FC5.jpg" alt="list item 1" />Title </a></li>
            <li><a href="#"><img src="http://cache.vevo.com/Content/VevoImages/video/77968679FBCAA89871EDBB06B9E3CBDC.jpg" alt="list item 2" />Title</a></li>
            <li><a href="#"><img src="http://cache.vevo.com/Content/VevoImages/video/36C3BC22295CFD6D4BB53E15F66EDDD0.jpg" alt="list item 3" />Title</a></li>
            <li><a href="#"><img src="http://cache.vevo.com/Content/VevoImages/video/8031B0A52C524E4E16867E3175ADE115.jpg" alt="list item 4" />Title</a></li>
        </ul>
    </div>
</div>

CSS

#menu-outer {
    height: 84px;
    background: url(images/bar-bg.jpg) repeat-x;
}

.table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}

ul#horizontal-list {
    min-width: 696px;
    list-style: none;
    padding-top: 20px;
    display: inline;
    }

ul#horizontal-list li {

display: inline-block;
   width:120px;
   border:1px solid red;
   overflow:hidden;
}

ul#horizontal-list li img{
  height:100px;
}