如何在两个具有绝对定位的 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

您已经知道标题和徽标的宽度。然后你就知道每个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。您不仅可以为更重要的东西（例如 javascript）保存 ID 标签，而且还可以通过向一个对象添加多个类来重用您的 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>