html页面转成jsp出现排版混乱的问题

jsp代码如下：
<div class="hotRecommendBox">
         <i></i>
         <h2>
             <a href="#"><img src="images/guanggao1.jpg" /></a>
                <a href="#"><img src="images/guanggao1.jpg" /></a>
            </h2>
            <ul id="con_porHot_1" >
             <li>
                 <dl>
                     <dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
                        <dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
                        <dd>也买价: <b>624.0</b> 元<br />已售出:<b>12568</b> 件</dd>
                    </dl>
                    <dl>
                     <dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
                        <dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
                        <dd>也买价: <b>624.0</b> 元<br />已售出:<b>12568</b> 件</dd>
                    </dl>
                    <dl>
                     <dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
                        <dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
                        <dd>也买价: <b>624.0</b> 元<br />已售出:<b>12568</b> 件</dd>
                    </dl>
                    <dl>
                     <dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
                        <dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
                        <dd>也买价: <b>624.0</b> 元<br />已售出:<b>12568</b> 件</dd>
                    </dl>
                </li>
                <li class="last">
                 <dl>
                     <dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
                        <dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
                        <dd>也买价: <b>624.0</b> 元<br />已售出:<b>12568</b> 件</dd>
                    </dl>
                    <dl>
                     <dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
                        <dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
                        <dd>也买价: <b>624.0</b> 元<br />已售出:<b>12568</b> 件</dd>
                    </dl>
                    <dl>
                     <dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
                        <dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
                        <dd>也买价: <b>624.0</b> 元<br />已售出:<b>12568</b> 件</dd>
                    </dl>
                    <dl>
                     <dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
                        <dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
                        <dd>也买价: <b>624.0</b> 元<br />已售出:<b>12568</b> 件</dd>
                    </dl>
                </li>
            </ul>
        </div>css代码如下：
.hotRecommendBox {width:948px; float:left; margin-top:5px; padding:5px; display:inline; border:1px solid #ddd; border-top:4px solid #ddd; position:relative;}
.hotRecommendBox i {width:70px; height:4px; overflow:hidden; background:#B7262B; position:absolute; left:-1px; top:-4px;}
.hotRecommendBox h2 {width:320px; float:left; margin-top:-5px; margin-right:5px; display:inline;}
.hotRecommendBox h2 img {margin-top:5px; display:inline; float:left;}
.hotRecommendBox ul {width:623px; float:right; margin-top:-5px; display:inline; overflow:hidden;}
.hotRecommendBox ul li {width:624px; height:240px; float:left; overflow:hidden; margin-top:5px; display:inline; background:url(http://img02.yesmywine.com/newWeb/images/button/xuxianX.gif) repeat-x bottom;}
.hotRecommendBox ul li.last {background:none;}
.hotRecommendBox ul li dl {width:136px; padding:0px 10px; float:left; background:url(http://img02.yesmywine.com/newWeb/images/button/xuxianY.gif) repeat-y right;}
.hotRecommendBox ul li dl dt {width:136px; height:180px; overflow:hidden; float:left; text-align:center;}
.hotRecommendBox ul li dl dd {width:136px; overflow:hidden; float:left; font:normal normal 12px/18px \5b8b\4f53; color:#666;}
.hotRecommendBox ul li dl dd a ,.indexSuitLeft ul li span a ,.newArrival ul li dl dd a ,.collection ul ol li dl dd a{color:#666;}
.hotRecommendBox ul li dl dd a:hover,.indexSuitLeft ul li span a:hover,.newArrival ul li dl dd a:hover ,.collection ul ol li dl dd a:hover {color:#B70513; text-decoration:underline;}
.hotRecommendBox ul li dl dd b ,.indexSuitLeft ul li span b,.newArrival ul li dl dd b ,.collection ul ol li dl dd b{color:#B70513; font-weight:bold;}