如何在绝对定位的两个UL之间放置图像？

Question

在我的标题中，我在图像的两侧都有一个图像精灵。我试图将它们水平放置在浏览器的顶部。标题必须定位：固定。

HTML：

<div id="headerbg">    
      <div id="header"> 
       <ul id="navleft"> 
        <li id="navhome"><a href="#top"></a></li> 
        <li id="navnew"><a href="#new"></a></li> 
        <li id="navbrands"><a href="#brands"></a></li> 
       </ul>    
       <div id="logo"></div> 
       <ul id="navright"> 
        <li id="navsales"><a href="#sales"></a></li> 
        <li id="navlocation"><a href="#location"></a></li> 
        <li id="navcontact"><a href="#contact"></a></li> 
       </ul> 
      </div>   
     </div> 

CSS：

#headerbg 
{ 
background-color: #ffffff; 
width:100%; 
height:50px;  
z-index: 1000; 
position: fixed; 
top: 0; 
left:0; 
} 

#header 
{ 
width: 800px; 
height: 100px; 
margin: auto; 
} 

#logo 
{ 
width:200px; 
height:100px; 
background:url(images/logo_small.jpg); 
display:inline-block; 
z-index: 2000;  
} 

/* NAVIGATION */ 

#navleft 
{ 
position:relative; 

} 

#navleft li 
{ 
margin:0; 
padding:0; 
list-style:none; 
position:absolute; 
top:0; 
z-index: 2000; 
} 

#navleft li, #navleft a 
{ 
height:50px; 
display:block; 
} 

#navright 
{ 
position:relative; 

} 

#navright li 
{ 
margin:0; 
padding:0; 
list-style:none; 
position:absolute; 
top:0; 
z-index: 2000; 
} 

#navright li, #navright a 
{ 
height:50px; 
display:block; 
} 

我离开了CSS的精灵的悬停图像，以缩短我的职务。我感谢任何帮助，我可以得到。谢谢！

Answer 1

您已经知道标题和徽标的宽度。然后，您knnow每个ul应该有一个width: 300px;，只是它们都设置为float:left;或display:inline;

#header ul { 
    width:300px; 
} 

#header { 
    display:inline-block; 
    *display:inline; /* IE hack */ 
} 

编辑

你也可以将特定CSS样式伪元素如：

#header ul:first-child { 
    width:300px; 
    position:relative; 
    top:0; 
    left:0; 
} 

#header ul:last-child { 
    width:300px; 
    position:relative; 
    right:0; 
    left:0; 
} 

我已重新键入您的代码以适应您的需求（以及我认为您的需求）

在这里看到拨弄http://jsfiddle.net/aLQYS/

而且对于未来，我会建议您使用类而不是Id的。您不仅可以将ID标记保存为更重要的内容，例如JavaScript，还可以通过向一个对象添加多个类来重用您的CSS样式，例如

CSS

.shadow { 
    box-shadow: 1px 1px 5px rgba(0,0,0,0.5); 
} 

.box { 
    width:200px; 
    height:200px; 
} 

HTML

<div class="shadow box"></div>