form 和 ul 并列问题

HTML code

<div id="logo"> 
            <div id="searchForm">
                <ul>
                    <li>pre</li><li>contant</li>
                </ul>
                
                <form action="/*.action" method="post" id="sForm">
                 <label >zoek:</label>
                 <input type="text" name="search"/>
                 <input type="image" name="img"/>
                        </form>
            </div>
             
 </div>

 

CSS code

#logo {
    height:102px;
    width: 972px;
    margin-right: auto;
    margin-left: auto;
    margin-top:20px;
    
    background-image: url(../image/1.jpg); 
    background-repeat: repeat-x; 
 }

#searchForm {
    color:#747E89;
    position:relative;
 }
 
#searchForm ul {
    position:absolute;
    right:300px;
    top:5px;
    display:inline;
    float:left;
    
}
#searchForm ul li {
    display:inline;
    margin-left:5px;
}

 #sForm {
 
     display:inline;
     float:left;
     vertical-align: middle;position:absolute;
     right:30px;
 }
 

我的问题：在一行内显示<ul>和form 但是效果出来的form和ul的差距很大。不知道怎样实现。

<div id="logo"> 
  <div id="searchForm">
  <ul>
  <li>pre</li><li>contant</li>
  <form action="/*.action" method="post" id="sForm">
  </ul> 
  <form action="/*.action" method="post" id="sForm">  
  <label >zoek:</label>
  <input type="text" name="search"/>
  <input type="image" name="img"/>
  </form>
  </div>
   
 </div>
form换个位置，再用样式设置一下就没什么问题了

你可以修改
#searchForm ul {
  position:absolute;
  right:300px;
中的
right:250px;

一样啊？