如何是ul中的li横排显示

<div class="genre">
    <ul>
        @foreach (var item in Model)
        { <li><a href="@Url.Action("Details", new { id = item.BId })">
         <img alt="@item.BName" src="@item.BookArtUrl" />
         <span>@item.BName</span> </a></li> }
    </ul>
</div>我的代码是这样的，如何写CSS样式可以使得item从左到显示，一页显示不完的时候可以自动换行？item的数量不确定。
还有怎样使得<span>的内容显示在图片正下方？