一个div标签里面有一个ul标签和一个span标签,怎么让这个ul标签和span标签在同一行显示?(代码和截图如下:)

一个div标签里面有一个ul标签和一个span标签,如何让这个ul标签和span标签在同一行显示?(代码和截图如下:)
我的代码如下:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style type="text/css" >
li{
float:left;
}
a{
  text-decoration:none;
 }
</style>
 
</head>

 <div style="border:solid 1px black; width:600px;"> 
<ul  style="list-style:none;background-color:red; width:200px; height:20px; border:solid 1px red;">
<li>
<a  href="#" data-no="1">1</a>
</li>

<li>
<a href="#" data-no="2">2</a>
</li>

<li>
<a  href="#" data-no="3">3</a>
</li>

<li>
<a  href="#" data-no="4">4</a>
</li>

<li>
<a  href="#" data-no="5">5</a>
</li>
</ul>

<span style="background-color:green;">
abcdefg<input id="btn"   value="确定"  type="button">
</span>
 </div>

</body>


我的代码实现的效果图,在第二楼:
------解决思路----------------------

<style type="text/css" >
  ul{float:left;margin-top:2px;}
li{
float:left;
}
a{
  text-decoration:none;
 }
</style>