求教一个div并排排列三个图片+内容后自动换行的问题，代码如下

不知道为什么嵌套进去java代码后每行只显示两个就自动换行，求教大神应该怎么改会每行显示三个
<style>
#main {
width: 600px;
}
ul li {
float: left;
margin-left: 10px;
list-style-type: none;
}
</style>
<div id="main">
<ul>
<c:forEach var="poster" items="${page.list}"
<li
<dl>
<dd>
<a href="#"><img src="${pageContext.request.contextPath }/images/${poster.image }"
width="103px" height="150px">
</a>
</dd>
<dt>
<p class="book_title">海报名称：${poster.name }</p>
<p class="book_inline">设计师：${poster.author }</p>
<p class="book_inline">设计价格：${poster.price }</p>
<br /> <a class="book_buy" href="#" target="_blank">buy</a>
</dt>
</dl></li>
</c:forEach>
</ul>
</div>
目前是这样的：