如何让<h1></h1>和<span></span>并列显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.leftl {
WIDTH: 440px; DISPLAY: inline; BACKGROUND: url(http://www.like815.com/pro/pic_bg01.gif) #fcf9e6 repeat-y; FLOAT: left; MARGIN-RIGHT: 10px
}
.leftl H4 {
TEXT-ALIGN: left; PADDING-BOTTOM: 10px; PADDING-LEFT: 20px; WIDTH: 400px; PADDING-RIGHT: 20px; BACKGROUND: url(http://www.like815.com/pro/pic_01.gif) no-repeat left top; FLOAT: left; HEIGHT: 15px; COLOR: #af6705; PADDING-TOP: 10px; border:1px #F00 solid
}
.leftl H4 SPAN {
TEXT-ALIGN: right; FLOAT: right; COLOR: #2f629b; FONT-WEIGHT: normal; border:1px #30F solid
}
/**********/
.leftl .content {
PADDING-BOTTOM: 0px; MARGIN: 20px; PADDING-LEFT: 0px; WIDTH: 400px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; PADDING-TOP: 0px
}
.leftl .content DT {
MARGIN: 0px 20px 0px 0px; WIDTH: 140px; FLOAT: left
}
.leftl .content DT UL.top {
PADDING-BOTTOM: 0px; MARGIN: 0px 0px 20px; PADDING-LEFT: 0px; WIDTH: 140px; PADDING-RIGHT: 0px; BACKGROUND: #fadba2; FLOAT: left; PADDING-TOP: 0px
}
.leftl .content DT UL {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 140px; PADDING-RIGHT: 0px; BACKGROUND: #fadba2; FLOAT: left; PADDING-TOP: 0px
}
.leftl .content DT UL LI.imgfull {
PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; WIDTH: 128px; PADDING-RIGHT: 5px; PADDING-TOP: 5px
}
.leftl .content DT UL LI IMG {
BORDER-BOTTOM: #fff 1px solid; BORDER-LEFT: #fff 1px solid; DISPLAY: block; BORDER-TOP: #fff 1px solid; BORDER-RIGHT: #fff 1px solid
}
.leftl .content DT UL LI.tit {
TEXT-ALIGN: center; PADDING-BOTTOM: 5px; MARGIN: 0px 0px 10px; PADDING-LEFT: 0px; WIDTH: auto; PADDING-RIGHT: 0px; BACKGROUND: #f89506; COLOR: #fff; FONT-WEIGHT: bold; PADDING-TOP: 5px
}
.leftl .content DT UL LI.photo {
TEXT-ALIGN: center; PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 4px 0px 4px 6px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
.leftl .content DT UL LI.photo IMG {
BORDER-BOTTOM: #fff 1px solid; BORDER-LEFT: #fff 1px solid; WIDTH: 58px; DISPLAY: block; MARGIN-BOTTOM: 5px; HEIGHT: 58px; BORDER-TOP: #fff 1px solid; BORDER-RIGHT: #fff 1px solid
}
.leftl .content DD {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 240px; PADDING-RIGHT: 0px; FLOAT: right; PADDING-TOP: 0px
}
.leftl .content DD UL {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 240px; TEXT-OVERFLOW: ellipsis; PADDING-RIGHT: 0px; WHITE-SPACE: nowrap; FLOAT: right; OVERFLOW: hidden; PADDING-TOP: 0px
}
.leftl .content DD UL LI {
TEXT-ALIGN: left; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-LEFT: 15px; WIDTH: 225px; TEXT-OVERFLOW: ellipsis; PADDING-RIGHT: 0px; WHITE-SPACE: nowrap; BACKGROUND: url(pic_dot01.gif) no-repeat 0px 8px; COLOR: #999; OVERFLOW: hidden; PADDING-TOP: 0px
}
</style>
<title>无标题文档</title>
</head>
<body>
<DIV class="leftl">
    <H4><SPAN><A class="blue" href="aaaaaaaaaa">更多>></A></SPAN>标题部分<SPAN><A class="blue" href="aaaaaaaaaa">文字描述</A></SPAN></H4>
    <DL class="content">
      <DT>
      <UL class="top">
        <LI class="imgfull"><A href="aaaaaaaaaa"><IMG src="img.gif"></A> </LI></UL>
      <UL>
        <LI class="tit">aaaaaaaaaa</LI>
        <LI class="photo"><A href="aaaaaaaaaa" target=_blank><IMG src="img.jpg"></A>
        <A class="blue" href="aaaaaaaaaa" target=_blank>aaaaaaaaaa</A> </LI></UL></DT>
      <DD>
      <UL>
        <LI><A class="gray" href="aaaaaaaaaa" target=_blank><FONT color=red>aaaaaaaaaa</FONT></A></LI>
      </UL>
      </DD>
    </DL>
<H5></H5>
</DIV>
</body>
</html>